问题标签 [html5-draggable]

我有一个可以拖动的 div 元素，但是我希望将它放到特定的 div 元素中。在这里，我需要在拖动时删除拖动的克隆元素 div，并且原始拖动的元素也不应该更改。

我在拖动时使用了自定义助手 div。在这里，如何删除克隆的拖动元素？

我正在使用下面的代码，

JSBIN 链接：JSBIN 演示

我正在研究一个简单的 HTML5 拖放元素。这是我的 JSFiddle：http: //jsfiddle.net/e4ogxcum/3/

我想对此进行编辑，这样就不可能将工具栏从页面中移出一半。这可能吗？

换句话说，我想防止工具栏从页面中间掉下来，如下所示：

这是我的完整代码：

;

我在具有拖放功能的 frame1 中加载了 fancytree。我有一个带有 Droppable traget 的 frame2；现在我根本无法将花哨的树节点移出 frame1。我只能在 frame1 中的 facnytree 中拖放。

请建议如何做到这一点？类似于 HTML 5 拖放....fancytree 节点在任何位置/任何 iframe/frame....fancy tree 是否支持这一点？如果不是；那有什么调整？

I'm trying to attach JQueryUI draggable to a set of elements below:

The draggable initialization code:

The element is displayed as below:

As soon as I mouse down to click on one of the items, I get this error on Firefox:

The browser become suspended churning out multiple error above every time I move the mouse and the clicked element becomes like this. This is before any dragging can be performed.

我正在使用 MVC 5 和 Entity Framework 6 创建一个 Web 应用程序，用户可以在其中提交报告并为其分配一个类别。一个报告可以有多个类别，一个类别可以有多个报告，因此是多对多关系。

实体框架创建了桥表，但在构建视图以管理实体之间的关系方面不是很有帮助。

因此，对于编辑和创建视图，Report我已经实现了本教程中的功能，以创建两个包含指定类别和可用类别的 MultiSelectList 框。使用一些javascript和控制器中的自定义代码将类别从一个列表移动到另一个列表，我更新了数据库。

这工作正常，但我真正想要的是拖放应用程序，用户可以在其中将Category具有可用类别的侧边栏拖动Report到分配它。

我安装了 JQuery Draggable 和 Droppable 插件，但后来发现了 HTML5 拖放功能。我找到了许多不错的教程，并设法在页面上获得了一些基本的拖放功能，但没有一个教程涉及更新底层数据库。现在我真的很难找到一种将分配的类别传回控制器的好方法，就像我对列表框所做的那样。

这是我到目前为止所拥有的：

这可以将一个列表从一个列表拖放Category到另一个列表，但是当Report保存它时，我无法在 ReportController ActionResult 中捕获分配的类别并更新数据库。我创建了一个参数string[] assignedCategories，希望它能够id="assignedCategories"像对列表框那样绑定，但这个参数始终是null.

Report.Categories使用 MVC 和实体框架使用 HTML5 拖放功能填充集合和更新数据库的最佳方法是什么？任何帮助或指向一个好的教程的链接将不胜感激。

更新： 我没有为assignedCategories 使用正确的表单输入字段，模型绑定器正在寻找名称，而不是ID。这就是assignedCategories 为空的原因。因此，我创建了一个隐藏的输入字段，name="assignedCategories"并且每次在分配的类别中删除类别时，我都会使用 javascript 更新值。现在我可以收集分配的 CategoryID 列表并在控制器中处理它。

尽管如此，必须有更好的方法来做到这一点。我可以使用哪种表单输入来删除分配的类别？

我的应用程序具有拖放功能。但是在缩放窗口拖放时无法正常工作。这是代码。

CSS 代码

jQuery代码

提琴手

我将 Angular 与angular-drag-and-drop-lists指令一起使用。它使用 HTML5 API 来实现拖放。我注意到，当将一个元素拖到浏览器地址栏上时，地址会被元素的数据重写，并且驱动程序会离开我的站点。有没有办法防止元素被拖到地址栏或限制它的拖动区域？

我正在使用 HTML5 原生拖放。

我在查找可拖动元素相对于其父容器的位置时遇到问题。

任务总结

我有一个“位置：相对”的 div，我认为它是一个“可放置区域”。在这个 div 中，我有几个“位置：绝对”图像元素，我已将它们标记为可拖动。我希望这些图像可以由用户自由移动。

要设置元素的位置，我在“dragend”上有一个监听器。

end top / left 变量必须基于百分比而不是像素。

当前尝试

下面你可以看到我的尝试：

这是我希望工作的 JSFiddle，评论显示了我期望每个部分做什么：

https://jsfiddle.net/oL8yd9Lr/

也许我在错误的森林里寻找错误的树。我会很感激任何指导。

我正在构建一个 A4 大小的拖放页面构建器。此构建器可以包含的元素是图像和文本框。

我正在寻求一些关于哪些框架可用于构建此类前端功能的建议。

我所追求的示例，请参见此处canva.com

到目前为止，我尝试的两个框架是fabric js和greensock draggable，它们不能满足我的需求，或者很难创建一个完整的页面构建器。

理想情况下，我不想为此使用画布。

编辑：基本功能：

• 裁剪
• 回转
• 重新调整大小
• 更改文本框的字体样式/颜色/大小
• 添加背景
• 框架/遮罩图像（方形图像可以变成带有叠加层的星形）

我有一个带有可拖动行的 HTML 表格。根据这个答案，我正在“取消”该dragover活动。

根据MDN，我正在preventDefault()（我认为）所有正确的地方打电话。

拖放在 Chrome 和 Safari 中完美运行。在 Firefox 中，拖放工作，然后 Firefox 重定向到一个新的 URL。

代码片段也可在jsfiddle.net/8d96vpws/3/ 获得

如何阻止 Firefox 更改位置？