问题标签 [html5-draggable]

我正在用 JavaScript 创建一个简单的图片益智游戏，并尝试实现 HTML5 拖放 API。如果我将 ondragstart、ondragover 或 ondrop 事件添加到元素（即作为属性），它会起作用。

但是，因为在同一类别中有很多不同的元素，我需要添加事件侦听器（如果我尝试用更多块拼图只会增加），我正在使用 addEventListener 添加事件。但是，如果我这样做，它不起作用。我已经在 Chrome 和 Firefox 中进行了测试。作为记录，我真的很想看看我是否可以使用 HTML5 Drag and Drop API 而不是 jQuery 来实现这一点。

以下是相关的 JavaScript：

这是随附的 HTML。请注意，为了证明正常事件有效但 addEventListener 无效，我在第一个拼图块和第一个拼图槽中添加了一个正常事件。那些工作正常，但其他人没有。

有史以来第一个 Stack Overflow 问题，希望我没有做任何太愚蠢的事情；）

我将一个元素拖到另一个元素上，当我松开拖动时，我希望另一个元素发生变化。但是当鼠标同时放开拖动的对象时，“mouseup”事件不起作用。我能做些什么？

我的 html 列表：

事件监听器：

插入函数：

我正在构建一个电子应用程序，在该应用程序中显示一个带有类名的引导框警报settingsModal。现在我想知道。有没有办法通过使用本机拖放 api 在页面上移动此警报？（不想使用 jQuery用户界面）。这是我的引导箱警报的代码：

我正在尝试使用interact.js 为我的移动应用程序使用可拖动的div（触摸和拖动）实现交互式菜单。他们网站上的 Snapping 示例似乎不起作用。它给出了错误：Uncaught TypeError: Cannot read property 'ownerDocument' of null。

这是我的 HTML 文件

我正在尝试在原生 HTML5 Drag And Drop API 中使用画布作为我的拖动图像。

问题是它适用于 Firefox，但不适用于 Chrome (58)，我无法确定问题所在。

代码：https ://jsfiddle.net/196urLwd/5/

我究竟做错了什么？

有一个每行都是可拖动行的表格，draggable=true用户如何仍然能够从列中选择文本？

另一个简单的例子（https://codepen.io/anon/pen/qjoBXV）

我需要拥有元素的移动（可拖动）属性。但是当我在输入（文本）上使用属性（可拖动）时，我失去了在直觉中滚动文本的能力。每当我需要滚动文本时，它都会移动元素。

帮我修一下。

我正在为我的项目使用简单的 HTML5 可拖动。我注意到一些奇怪的行为。尽管没有添加可拖动属性，但我在 chrome 上选择的任何文本都是可拖动的。即使在浏览器 URL 栏中，这些选定的文本也可以拖放到任何文本框中，并且在拖放到 URL 栏时，它会退出应用程序并搜索 google 站点。

那么如何限制在浏览器 URL 栏中放置的任何可拖动元素

我可以将多个图像从一个画布拖放到另一个画布上。但我无法将图像存储在 Localstorage 中。所以，我想根据图像索引将图像从 dropzone 区域存储在 localStorage 中。我该如何克服这个问题？

我想要，

-将图像保存到 LocalSrorage
- 将文件保存到 LocalStorage
- 通过 IndexDB 保存图像和文件

请任何人帮助我。感谢提前。

我们在 Firefox 56 中遇到了 javascript 拖放的重大问题。症状是拖放停止在所有选项卡/页面上工作 - 而不仅仅是我们的选项卡。

注释掉这个 jsfiddle 中的调用setData()会使问题可靠地发生。我们的代码正在调用setData；但是，经过几次拖动后，它就停止了工作。

https://jsfiddle.net/5jobd9tw/27/