draggable 相关问题

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 现在您必须将共享模块导入到导入相应组件的同一模块中

“在 React Native 中使用相机捕获实现可调整大小和可拖动的内部视图”

我正在开发一个 React Native 项目，我需要实现具有特定要求的相机功能。我想在相机内有一个可调整大小和可拖动的内部视图，当我

可拖动小部件在拖动时丢失文本样式 - Flutter

当我拖动视图时，文本会更改其样式。我猜想正在进行一些重建工作。知道如何使文本在拖动时保持不变吗？ 定位（ 左：_textPosition.dx，...

如何根据其内容动态设置DraggableScrollableSheet最大尺寸？

问题 所以基本上这是一个相当老的问题，我无法通过谷歌解决。问题是 DraggableScrollableSheet 不会根据其内容大小来调整其最大大小，而是仅使用

在ReactJs中拖动Cursor位置的元素

我正在尝试用 React 构建一个游戏，它需要拖放功能。该游戏有两个主要组件：SideBar 和 GameBoard。 SideBar 包含要拖动到 GameBoard 上的元素。阻力...

我面临一个问题，即我的 DotComponent 实例没有出现在 Flutter 的 Flame 游戏中的 LineComponent 上

我正在创建一条可调整大小的线，当尝试拖动线上的点以调整大小时，DotComponents 没有出现在该线上；相反，它们出现在其下方。我已经附上...

如何在 dnd-kit/core React JS 中进行多选

请问如何在 dnd-kit 中实现多选？ 这本故事书展示了它的实际应用，但没有显示完整的代码 故事书链接

Kivy - 如何通过 Draggable 在 ScrollView 之间拖放小部件？

我进入了一个需要 Draggable 的 Kivy 项目。 环境： 操作系统：Windows 10 家庭版 Python==3.11.5 基维==2.2.1 kivy-garden-draggable==0.2.0 这是我的 py 和 kv 文件： 列表.py： 来自 kivy.app 我...

如何在use-gesture/react中使用鼠标右键事件

当我在网格上使用反应使用手势中的绑定功能时，网格上的鼠标按下事件将被绑定事件覆盖。而 usegesture 只接受左键单击事件。 我试过了

Framer Motion 返回拖动按钮

我有可以使用成帧器运动上的拖动来移动的对象。如何制作一个按钮将所有元素返回到其初始位置？ 我尝试用 animate 来做，但是动画很清晰而且......

动态创建的元素在 HTML 和 JS 中可拖动的问题

我正在帮助一位朋友为他们的一个班级设计一个班级组织者。我有一个类列表，显示在屏幕左侧的搜索栏上，需要将它们拖到...

如何使react-bootstrap模式可拖动

我尝试过让它发挥作用，但这就是发生的事情。 使用react-draggable npm 包，我能够使内容可拖动和可放置。但整个对话框的背面保持原位，并且它

Draggable React typescript 扩展组件

我是 React 和 Typescript 的初学者。想要制作一些带有拖动效果的很酷的打开窗口。找到draggable包，但我不明白如何像扩展组件一样使用它。 从电话里写信...

React-rnd子组件调整大小时如何按比例调整font-size？

我正在尝试制作一个可拖动的组件来模拟模因生成器的组件，但当拖动的容器改变其大小时，未能使文本的字体大小按比例增大和缩小。 他...

如何使用可以通过轨道控制移动的正交相机在react-三/光纤中拖动x和z上约束在y上的对象？

我希望能够使用 React-三纤维和正交相机在画布中将对象拖动到平面上（想象棋盘上的棋子）。 这是一个例子（不是我的）......

使用 HTML / CSS 的多个可移动、可调整大小的窗口

我尝试仅使用 HTML / CSS 制作多个可移动的可调整大小的窗口。 根据 CSS-Tricks 的这篇文章，我制作了两个窗口，它们都可以移动。 然而，第二个窗口

有没有办法使用 jquery 在表格中同时拖放两个元素（div）

我正在使用jquery同时将两个元素div拖放到具有九个单元格（网格）的表格中，这是代码， 超文本标记语言 我正在使用 jquery 在具有九个单元格（网格）的表格中同时拖放两个元素 div，这是代码，HTML<table border="1" class="mainTable"> <tr> <td id="11"> <div class="dragDiv" id="1"></div> </td> <td id="12"><div class="dragDiv" id="2"></div></td> <td id="13">&nbsp;</td> </tr> <tr> <td id="21">&nbsp;</td> <td id="22"> &nbsp; </td> <td id="23">&nbsp;</td> </tr> <tr> <td id="31">&nbsp;</td> <td id="32">&nbsp;</td> <td id="33"> &nbsp; </td> </tr> </table> CSS.mainTable { margin: 20px auto; padding: 0px; } .mainTable tr td { width: 100px; height: 100px; } .dragDiv { text-align: center; background-color: #00ABA9; height: 50px; vertical-align: middle; margin: auto; position: relative; width: 100%; } jquery$(function() { $(".dragDiv").draggable({ revert: 'invalid' }); $(".mainTable tr td").droppable({ accept: function() { return $(this).find("*").length == 0; }, drop: function(event, ui) { var $this = $(this); $this.append(ui.draggable.css({ /* manually append the element and reset positioning */ top: 0, left: 0 })); ui.draggable.position({ my: "center", at: "center", of: $this, using: function(pos) { $(this).animate(pos, 100, "easeOutBack"); } }); } }); }); 我尝试了在这个网站上找到的许多答案，例如这个答案here和here等等 这是我在 Codepen 中的项目代码 我很高兴听到一些建议，谢谢。 要允许您的盒子容纳多个元素，您需要更改接受子句以允许任何具有 .dragDiv 类的元素。 正如您在所附的代码片段中所看到的，现在可以在同一个框中放置两个元素。 （我还添加了一些 Flexbox 样式并删除了一些不需要的样式来清理 CSS，同时保持元素在容器内居中）。 $(function() { $(".dragDiv").draggable({ revert: 'invalid' }); $(".mainTable tr td").droppable({ accept: ".dragDiv", drop: function(event, ui) { var $this = $(this); ui.draggable.position({ my: "center", at: "center", of: $this, using: function(pos) { $(this).animate(pos, 100, "easeOutBack"); } }); } }); }); .mainTable { margin: 20px auto; padding: 0px; } .mainTable tr { display: flex; flex-flow: row; } .mainTable tr td { width: 100px; height: 100px; display: flex; flex-flow: column; justify-content: center; } .dragDiv { background-color: #00ABA9; height: 50px; width: 100%; } <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> </head> <body> <table border="1" class="mainTable"> <tr> <td id="11"> <div class="dragDiv" id="1"></div> </td> <td id="12"> <div class="dragDiv" id="2"></div> </td> <td id="13"></td> </tr> <tr> <td id="21"></td> <td id="22"></td> <td id="23"></td> </tr> <tr> <td id="31"></td> <td id="32"></td> <td id="33"></td> </tr> </table> </body> </html>