问题标签 [html5-draggable]

在dragstart事件中，我想获取拖动元素的实际 html。dragstart 但是当我在某个事件 中做这样的事情时，console.log( e.target);它会按预期给我这样的输出；

但是这段代码 console.log(JSON.stringify(e.target));给了我这样的输出；

dragstart当从这样的drop事件发送数据时

然后从e.dataTransferdrop 事件中捕获数据

我最终得到了这个输出[object HTMLParagraphElement] ，现在，我尝试如何将它[object HTMLParagraphElement]转换为 UI 上可呈现的 HTML，.innerHTML and .outerHTML但它在屏幕上给了我未定义的相当正确的输出。

我对 html5 可拖动项目有疑问。我一直在看这个例子：https ://codepen.io/retrofuturistic/pen/tlbHE

如果我自定义它并使父母可以拖动

事实证明，当您尝试对列表项“child-li”进行排序时，它会尝试拖动“parent-li”

dragSrcEl 与 this.parentNode 相同：“parent-li”。

那么，只要它们处于同一级别，就可以对列表项进行排序吗？

好的，基本上我想要实现的是，当一个dragover事件从.HTML5 Drag And Drop APIdraggabledragendHTML5 Drag And Drop API

我想这样做的原因如下：

• 我有一个使用插件的应用程序，它具有依赖于jQuery.ui draggableto 功能的功能（它是FullCalendar Scheduler插件，版本 3）
• 我想在应用程序中实现一个新功能，客户端可以使用它从浏览器窗口 A中拖动一些东西，并将其拖放到浏览器窗口 B中的上述插件中。
• 由于上述插件不适用于 native HTML5 Drag and Drop API，并且jQuery.ui draggable无法将元素从一个浏览器窗口拖动到另一个浏览器窗口，我认为我唯一的选择是将这两个插件混合使用。

我对这个问题提出的解决方案是，使用 native HTML5 Drag and Drop API，当拖动元素到达 a 时，在浏览器窗口 Bdropzone中创建一个新的可拖动元素，并在其上模拟一个事件，因此它开始跟随光标。当事件触发时，我计划简单地在元素上触发事件，从这里开始，调度程序插件可以做到这一点。mousedowndragendmouseupdraggable

为了尝试对此进行测试，首先使用单个浏览器窗口，我尝试实现上述解决方案的第一部分，即：当dragover触发时，创建jQuery.ui draggable并模拟mousedown它，然后它应该开始跟随鼠标. 我无法实现这种行为。

我做了一个小提琴，在那里你可以看到我到目前为止尝试过的东西（我没有在这里发布整个代码，因为它相当长）：JSFiddle

基本上，我在 Fiddle 上遇到的错误，我尝试了这两个选项，都是一个type.indexOf is not a function错误。

我还就以下问题询问并获得了一些帮助，建议的解决方案在使用事件启动拖动操作时click可以正常工作，但它不适用于任何其他事件类型。mousedown.draggable我强调，我只能从 a模拟一个事件，MouseEvent而该dragend事件不是 a MouseEvent。

长话短说，我需要帮助才能获得我正在寻找的结果，至少对于我提出的解决方案的第一部分！

当我可以在图像上放置标记时，我正在尝试创建拖放应用程序。虽然这是一个 Angular 应用程序，但我使用普通的旧 JS API 进行拖放以解决CDK.

我可以20x20在图像周围移动一个 div 并将其放置并通过设置 div 的顶部/左侧样式来设置图像上的位置。但是，我遇到的问题是offset[XY]鼠标向下的点。因此，如果我抓住左上角，我的 div 将落在我期望的位置。如果我抓住中间的 div，那么它会被拖动点偏移量关闭。

我怎样才能纠正这个可拖动的偏移量？还是有更好的解决方案？

我刚刚学习了 HTML5 可拖放 API 的基础知识。我不知道如何将拖动位置保留在其放置位置。放下它会改变它的位置。

这是基本的 HTML（仅相关元素）：

我希望拖动的元素保持在它被放置的最终位置。任何指针将不胜感激。

我正在使用这个 AngularJS Drag & Drop 库，文档令人困惑，而且已经过时了，但效果是，即使无处可放，它似乎总是会掉下来。

我正面临一个问题，我正在拖动一个 div。

虽然幽灵元素在 MacOs 上看起来不错（在 Chrome 和 FireFox 上都是如此），但在 Windows 中它似乎太透明了（在 Chrome 和 FireFox 上都是如此。我尝试了多种方法，但似乎没有任何效果。所以可以设置样式吗？鬼元素？

此外，我尝试在旅途中制作该元素的图像，并将其用作幽灵拖动图像，但透明度问题仍然存在。

这是我的拖放填空代码。但问题是，如果用户在他/她得到点之后在错误的位置插入了错误的单词，他/她想要将单词放在正确的位置。在此代码中，那种类型的单词删除不起作用。

我试图让p一个嵌套的元素img在拖动时显示为重影图像。

我不确定如何调试它，但我注意到一旦图像被缓存或被拖放到页面上的某个位置，它就会按预期工作。我在这里做了一个 MWE：

笑脸在页面首次加载时被拖动并显示错误行为 - 表情符号在拖动过程中不显示。悲伤的脸被拖动，释放，然后重新拖动，这导致了预期的行为 - 表情符号确实显示为幽灵图像的一部分。所有图像都是如此。

我试过的： 我认为这可能是页面元素加载方式的问题，所以我将 javascript 移动到正文的底部（试图确保在脚本运行之前加载所有元素）。这并不能解决问题。

MWE 代码：我从这里 得到了表情符号，但我想你机器上的任何 png 都可以重现这个。

索引.php：

image_set.json：

样式表.css：

这是我的代码。我用不同的选择器定义了两个不同的 drop 事件，但是父事件覆盖了子 drop。

父“drop”用于a，子“drop：用于a。我想在客户端放在图像上时分配一个特定的功能。

这是我的小提琴：https : //jsfiddle.net/Bhavesh21/1haokeum/5/ aliceblue div 是工作区，您可以将设备和反应物拖到工作区。如果您首先将 SampleTestTube 拖到工作区，然后将试剂拖到其上，则与图像关联的侦听器不起作用。

另一方面，如果您将 Reagent 直接拖到设备中的 SampleTestTube 上，它就可以工作。