23

有没有办法使用 HTML5 拖放 API 来控制“你正在拖动的东西”的外观？

通常，任何可拖动的 HTML 元素都会变成半透明的，并跟随您的光标，直到您停止/放下。我想控制它，以便我可以从元素内的任何位置开始拖动，但是当你真正开始拖动时，我只能让一个小图像跟随光标，正好是光标所在的位置。

实际示例是：要拖动的东西的列表，每个都是一个小图像和一些文本，用于您将拖动到它旁边的东西的名称。我希望能够在图像或文本上的元素中的任何位置开始拖动，但是只有图像跟随您的光标，并且直接位于光标下方，而不是从您开始拖动它的位置偏移。

我可以想出一些方法来欺骗它（当您开始拖动时，鼠标光标所在的位置出现隐藏元素，并且是您实际拖动的内容），或者诉诸经典的 Javascript 拖放。

谢谢

4

3 回答 3

24

我想.setDragImage(element, x, y);可能是你正在寻找的。

function handleDragStart(e) {
    var dragIcon = document.createElement('img');
    dragIcon.src = 'http://...';
    dragIcon.width = 100;
    e.dataTransfer.setDragImage(dragIcon, x, y);
}

this.addEventListener('dragstart', handleDragStart, false);

此处示例：jsfiddle.net/cnAHv/

于 2013-06-17T19:21:03.690 回答
9

不幸的是，看起来该规范是为了支持一致的本机行为而不是浏览器内的自定义。

我们进行了大量研究并在这里总结了我们的发现：

https://www.inkling.com/engineering/native-html5-drag-drop/

不过，总而言之，如果您需要做任何复杂的事情，使用帮助程序（如 jQuery UI）或滚动您自己的帮助程序通常更可取。

尽管如此，如果您真的想使用本机行为并且 setDragImage() 还不够，那么还有一些替代方案。

一种特别奢侈的方法可能涉及劫持渲染器以创建元素的屏幕截图（！），因为您希望它被设置为样式，然后通过数据 URI 插入它。

见：http ://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4

更明智的方法是简单地绝对定位幽灵元素以跟随鼠标。但这让我们回到编写代码，在 API 之外重新实现拖动行为的核心部分。

于 2013-11-09T08:38:12.387 回答
3

根据 StackOverflow 上的这个问题，我们不能在拖动时更改可拖动对象的样式，但我们可以设置拖动图像。这将导致在拖动重影对象时出现图像。

event.dataTransfer.setDragImage(document.getElementById('div2'),50,50);

解释：

dataTransfer我们调用一个函数，在setDragImage()该函数中我们传递 div 的 ID，并给出开始拖动图像时图像出现的位置。

在此处查看更多信息dataTransfer： Mozilla 开发人员 - 数据传输

于 2013-06-24T13:22:49.650 回答