问题标签 [html5-draggable]

在 Safari 中，以下代码显示了拖放时按下的修饰键。但是在 Firefox 中，修饰键没有被注册。

测试代码，https://jsfiddle.net/omofkgdv/21/。

此处正在测试 Command 键，但没有任何修饰键（Shift、Alt、CTRL 或 Command）注册。

OSX 10.11，火狐 58

重现步骤
1. 打开浏览器并将事件处理程序添加到文档（参见示例） 2. 打开 finder 并拖动文档或元素 3. 拖动时按住 shift、alt、ctrl 或命令键 4. 释放鼠标按钮

预期结果
事件反映按下的修饰键

实际结果
在特定测试中，如果事件修饰键值全部为假。请注意，如果窗口具有焦点，有时会显示修改键（需要更多测试才能正常工作）。请参阅 gif 和提供的示例链接。

我正在制作一个播放列表用于演示目的。我已经设置了一个嵌套列表项的无序列表。“draggable=true”处理程序使这些项目可拖动，效果很好。

这就是我被困的地方；

一旦项目被点击，并准备拖动。我需要用户对用户丢弃物品的位置有强烈的视觉反馈。标准化没有给出任何视觉反馈，只是将列表项放在其他项之间。我正在寻找一种方法来在视觉上将其他列表元素推到一边，或者至少在用户持有拖动项目的位置上突出显示边框。

解决这个问题的最佳方法是什么？我在这里放了一些代码以防万一，但我正在寻找的是我编写的代码之外的内容。

HTML：

JS

如何添加允许我以项目之间突出显示的边框形式设计视觉反馈的代码。

我正在尝试在我的拖动事件中设置一个自定义数据，它是一个 HTML 元素。到目前为止，我这样做了：

有没有办法做到这一点？

JSON.stringify在将元素传递给拖动事件之前，我已经尝试对元素进行操作。但JSON.stringify不适用于 HTMLElement 对象

这个来自 mdn 的参考资料说可以使用自定义数据

我目前正在尝试创建一个 Enyo.js 拖放应用程序。我本机使用 HTML5 拖放 API。我在我的“ondragstart”处理程序中不断遇到这个错误。我知道我正在正确调用事件处理程序，因为我正在调用该函数，但是，当我尝试设置“dataTransfer.setData()”时它会出错。我得到的错误是

TypeError：未定义不是对象（评估'inEvent.dataTransfer.setData'）

我不明白为什么，请帮忙。

上面的代码是我如何设置对象（对象具有可拖动：true）以及我如何处理事件。

下面的代码是我如何处理事件

谁能帮我拖放占位符。我有 2 行（左右），每行有 5 个项目。

我想border-style: dotted;用简洁的动画显示占位符 ( )。Soo .. 在我放下要显示边框的项目之前。

您可以在下面找到我从w3school使用的示例

https://www.w3schools.com/html/html5_draganddrop.asp

我希望它看起来如何！

我有一个可拖动的元素。我想删除重影图像，因为我将以另一种方式创建它。

但是，谷歌浏览器不允许我使用setDragImage(). 空白图像是在拖动之前创建的，我setDragImage()在dragstart事件处理程序中使用，所以我看不出我做错了什么。重影图像不应出现。

这是一个例子：

在 Chrome 上，如果拖动带有红色边框的框，则会出现重影图像，即使我使用的是setDragImage(). 一切都在 Firefox 上正常运行（而 Edge ......甚至没有这个功能）。

我的 Chrome 版本是 66。

W3学校掉落事件示例

我在我的 Angular 应用程序中使用 HTML5 拖放 api。完成实施后，我意识到 drop 事件在一些下降后无法突然触发一个实例。我从 div 列表中拖动并将它们放置在相同的放置位置，并且放置事件无法在中间触发。

因此，我尝试使用以下简单代码，但在某些（7-15）掉落后无法触发。w3 学校官方掉落事件示例中的同样问题。

情况：我正在使用 HTML5 拖放在我正在编写的游戏中放置图块。我想添加一个效果，其中我将要放置一个新瓷砖的两个瓷砖稍微分开，以表明这是你要放下的地方（类似于 Mac OS 扩展坞）。

我的方法：我有一个flexbox将这些瓷砖放入其中的方法。我写了一个函数，它基本上返回一个正弦波的周期，我用它来根据right:它们在.top:position: relative;drag

问题：在 Chrome 中（但不是在 Firefox 中），在某些我找不到模式的鼠标位置，图块来回跳跃。请参阅下面的 .gif：

在 Chrome（左）和 Firefox（右）中：

我什console.log至 ged 元素的计算right:属性，当它显示在屏幕上跳跃时，它输出为一个常数值。

我尝试过/想到的：

• 即使鼠标静止并console.log(event.clientX)输出恒定值，图块也会跳来跳去。
• 我认为event.clientX可能会在不知不觉中发生变化，所以我根据我的计算Math.trunc(event.clientX)无济于事。
• 我element.getBoundingClientRect()在我的计算中使用，我不是很熟悉，我认为这可能是我问题的根本原因。

我制作了这个 CodePen，但无法完全复制该问题。不过，我认为有人可能能够发现正在发生的事情。

编辑：我把它放在一个github 页面上以完全复制. 此链接可能不适用于该问题的未来读者，但我会在可预见的将来继续使用它。要演示该问题，请在 Chrome 和 Firefox 中查看。

谢谢你。

我正在使用 Angular 应用程序中的 HTML5 拖放功能。我有以下情况：

• 带有一些可以拖动的“对象”的容器
• 用户可以放置拖动元素的表格

我已按照本教程中的步骤操作： https ://medium.com/@mithun_daa/drag-and-drop-in-angular-2-using-native-html5-api-f628ce4edc3b

我创建了以下应用程序： https ://stackblitz.com/edit/angular-vhyax1?embed=1&file=src/app/app.component.html

我已将“makeDraggable”指令应用于 HTML 表，因此它接受了 drop 事件。我想知道是否有办法识别删除元素的表格单元格。我知道我可以将“makeDraggable”指令添加到每个 TD 单元格而不是父表，但我想避免它，因为表可以有数千个单元格。是否有可能（并且在性能方面值得）？

非常感谢，

我正在使用 HTML 5 Drag and Drop API，并实现可排序列表和自动滚动。对于某些功能，我希望能够检测到元素的哪一部分被抓取

这是插图

任何帮助将不胜感激，谢谢