draggable 相关问题

使用 dnd-kit 时监听器发生冲突

我正在开发一个待办事项列表应用程序，我想让待办事项可拖动。 我正在使用 dnd-kit 来实现相同的目的。 我在父容器中提供了 DndContext 和 SortableContext。

如何在抓取拖放元素时删除加号图标

我正在尝试删除dragenter上抓取光标上的加号图标。 我试过： 函数拖开始（e）{ e.dataTransfer.effectAllowed = '无'; } 函数拖拽输入(e) { e.preventDef...

Web动画api填充模式混乱，（影响可拖动元素后续交互）

所以我有这个简单的例子，它模仿棋盘中的可拖动棋子。 在指针向上时，我想执行回弹动画以恢复起始位置。 好吧，如果我不指定它就可以工作......

如果使用变换比例，为什么 jquery ui 可拖动包含不起作用

我有一些代码可以说明这个问题。 JSFIDDLE 我有一个可以拖动的元素，效果很好。我添加了一个允许用户“放大”的按钮。这我...

我需要React可拖动可调整大小的库，仅在元素的某些部分上拖动 - “react-moveable”

我正在寻找一些React库，这将使我的仅在元素的某些部分可拖动，可调整大小。 我找到了“react-moveable”库，它使我的元素变得拖沓...... 我正在寻找一些 React 库，这将使我的 <div> 仅在元素的某些部分可拖动，可调整大小。 我找到了“react-moveable”库，它使我的元素可拖动和可调整大小，但我需要我的用户能够在可拖动组件中工作，而不仅仅是移动它。 任何人都知道如何做到这一点，或者可以建议任何其他能够做到这一点的图书馆吗？ 谢谢您的建议！ 您可能想查看react-rnd，它似乎满足您的要求

允许将项目拖动到窗口高度以下。普通 JavaScript

我正在尝试为我的客户构建一个网站，这与 Miro（或其他白板应用程序）没有什么不同。 这个概念是使用绝对定位来布局各个元素，但管理......

可移动/可拖动<div>

这是我更新和修改的脚本，它完全可以工作，除了我想通用它......观察****我怎样才能做到这一点，这样我就不必执行 function(e){ BOX.Draggable.elemen...

无法将方框拖到周历中的特定时间段

我可以拖放框，但是它会先在任何空的时间段中投放，而不是投放到实际的时间段，例如，如果我将框投放到第 26 个 t1 到第 27 个 t2，那么它会将框投放到 t1 2...

当 v-model 值是父标签的可迭代时，Vue 2 可拖动不反应

我正在使用 Vue 2 和 Vuex。接收到的对象首先根据 classCategory 值分类为单独的子对象。 它不起作用，因为draggable中的v-model值是来自父级的键...

当父项可拖动时，无法选择<input>内的文本

这是 IE 特定的（显然不再是了）。我们有非常简单的代码： 文字 在 Chrome 上它可以工作...

Flutter - 将 Draggable 从抽屉拖动到主体

给定抽屉中的项目列表，是否可以以某种方式将其中一个项目从抽屉拖到脚手架主体上并拖入 DragTarget 中？ 下面是一个简化的示例，显示...

`下面更新的代码`无法拖动日历每周列中的框

下面更新了代码 目前，我有一个每周日历，其中 t1 到 t10 作为时间段，左侧显示日期和日期。我有一些带有硬编码天数的随机硬编码数据的拖动框，例如 5，...

Flutter Draggable 小部件，可以单击或拖动以移动到 DragTarget

我正在尝试创建一个小测试，允许用户单击或拖动 Draggable 或 Container 将其移动到 DragTarget。我能想到的最好的例子就是 Duolingo 如何允许......

如何在Python中进行鼠标拖动选择？

如何在Python中进行鼠标拖动选择，就像在Windows或星际争霸上一样？ 我使用 QML、Pygame 和 pyautogui。 我需要它来更新矩形，可以从矩形切换到圆形/等等。 基本上我就是

拖放框显示停止标志

我希望能够将可拖动框拖放到任何其他日期，并且它应该删除前一个日期。 例如，如果我将拖动框从 3 月 5 日移动到 3 月 6 日，它应该从 5 米处删除...

WinAPI 32 和 GDI+ 在拖动具有透明度的某些区域的 PNG 图像时移动窗口

我编写了一个程序，创建一个具有 WS_POPUP 属性的窗口，以便加载具有透明部分的背景的 PNG 图像， 首先在案例 WM_MOUSEMOVE 中包含的代码中：我我们...

OnDragEnd 不返回起始位置

我正在使用draggable='true'属性在我的网站中创建一个可拖动元素，但我遇到了一个外观问题。 拖动基本上是为了重新排序元素，所以我想把它们捡起来......

.dropDestination 无法使用我的自定义可传输类型执行

我已经定义了 导入 SwiftUI 导入统一类型标识符 枚举 LayerType: String, Codable, RawRepresentable { 案例文本 案例图片 } struct TransferableLayer：可识别、可哈希、可...

使 HTML5 可拖动项目滚动页面？

我在网页上的一些 div 上使用 HTML5 属性draggable =“true”。我想要这样，当您将这些项目之一拖到页面底部时，它会向下滚动页面，当您...

在 Angular 中使用 cdkDropListData 时出现错误，无法绑定到“cdkDropListData”，因为它不是“div”的已知属性

<div cdkDropList #girlList="cdkDropList" [cdkDropListData]="girls" [cdkDropListConnectedTo]="[convaList]" class="example-list" (cdkDropListDropped)="drop($event)"><div class="card color-challenging mb-2" *ngFor="let girls_data of girls" cdkDrag> <div class="card-body p-2 justify-content-between align-items-center d-flex"> <span class="reading-grade font-weight-bold">{{girls_data.id}}</span> <div class="student-grade flex flex-grow-1"> <p class="justify-content-between align-items-center d-flex"> <span class="student-name">{{girls_data.firstName}}{{girls_data.lastName}}</span> <span>{{girls_data.gender}}</span> </p> <p class="justify-content-between align-items-center d-flex"> <span>{{girls_data.currentAcademicYear}}</span> <span><i class="fa fa-ban" aria-hidden="true"></i> <i class="fa fa-paperclip" aria-hidden="true"></i></span> </p> </div> <span class="behavior-grade text-right font-weight-bold">{{girls_data.inGrade}}</span> </div> </div> 使用 [cdkDropListData] 时，控制台上出现错误，无法绑定到“cdkDropListData”，因为它不是“div”的已知属性。 我是 Angular 新手，所以请避免新手行为 我已经在 module.ts 中导入了 CdkDragDrop 这是组件文件。 import {Component, NgModule} from '@angular/core'; import {StudentModel} from '../model/studentRepository.model'; import {Student} from '../model/student.model'; import {CdkDragDrop, DragDropModule, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop'; @Component({ selector: 'student-selector', templateUrl: 'studentSelector.component.html', styleUrls: ['./studentSelector.component.css'] }) export class StudentSelector { boys = []; girls = []; constructor(private dataModel: StudentModel) { this.boys = dataModel.getStudents(); this.girls = dataModel.getStudents(); } get students(): Student[] { return this.dataModel.getStudents(); } conva = []; drop(event : CdkDragDrop<string[]>){ transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex); } } 这是模块文件。 import {NgModule} from '@angular/core'; import { StudentModel } from './studentRepository.model'; import { SimpleDataSource } from './datasource.model'; import {DragDropModule} from '@angular/cdk/drag-drop'; @NgModule({ providers: [StudentModel,SimpleDataSource], imports : [DragDropModule] }) export class ModelModule { } 导入应该是这样的： import {NgModule} from '@angular/core'; import { StudentModel } from './studentRepository.model'; import { SimpleDataSource } from './datasource.model'; import {DragDropModule} from '@angular/cdk/drag-drop'; @NgModule({ providers: [StudentModel,SimpleDataSource], imports : [DragDropModule] }) export class ModelModule { } 并且（参见代码中的注释） import {Component} from '@angular/core'; <= NgModule removed import {StudentModel} from '../model/studentRepository.model'; import {Student} from '../model/student.model'; import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop'; <= DragDropModule removed @Component({ selector: 'student-selector', templateUrl: 'studentSelector.component.html', styleUrls: ['./studentSelector.component.css'] }) export class StudentSelector { ... } 一般： xxxModule 只能在模块级别导入，而不是在组件级别导入。 另外，正如我在评论中提到的： 看起来您的 StudentSelector 与您的 ModelModule 位于不同的模块中（至少它不是您提供的声明的一部分）。组件只能在声明它的模块中使用（声明列表），或者导入另一个模块，该模块反过来声明该组件并导出它（导出列表）。 将其导入您的应用程序模块中 import { DragDropModule} from '@angular/cdk/drag-drop'; 然后重新运行应用程序。 问题很可能是没有导入正确的模块。 import { DragDropModule} from '@angular/cdk/drag-drop'; 不过，如果有人面临这个问题，则意味着您尚未在任何模块中声明您的组件（例如：App.module.ts） 因为这个属性需要模块声明。 （例如：如果有人使用ComponentFactoryResolver打开一个组件，那么它不需要在app.module中声明，但要使用'[cdkDropListData]'，则需要声明它app.module） 这不是非常技术性的解决方案，但我遇到过一些事情。 1。在加载页面之前清除缓存（如果您通常不清除它）。有时会错过将数据获取到变量的情况。 2。修复当前页面中的运行时错误（可能在另一个块中但在同一页面中）。 但是我遇到了第一个问题。当我清除缓存时它起作用了。 确保在该模块中导入cdkDropListData，其中在其声明中导入相同的组件。 简单来说，想要使用 cdkDropListData 模块的组件必须是 imported 模块中。 现在声明部分中的相应组件和 cdkDropListData 在同一模块的导入部分 如果您的项目使用，例如，shared.module.ts 您必须在其中导入和导出cdkDropListData 现在您必须将共享模块导入到导入相应组件的同一模块中