Question

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

通常情况下，无论可拖动的HTML元素是什么都变为半透明并跟随光标直到停止/删除。我想控制它，以便我可以从一个元素内的任何位置开始拖动，但是当你真正开始拖动时，我只能在光标后面有一个小图像，就在光标所在的位置。

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

我可以想到几种方法来欺骗它（一个隐藏的元素出现在你的鼠标光标所在的位置，当你开始拖动时就是你实际拖动的那个），或者采用经典的Javascript拖放。

由于

Answer 1

我认为.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/

Answer 2

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

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

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

但是，无论是长期还是短期，如果您需要做任何复杂的事情，通常最好使用帮助器（如jQuery UI）或自己滚动。

尽管如此，如果你真的想使用原生行为并且setDragImage（）还不够，还有一些选择。

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

请参阅：http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4

更安全的方法是简单地将鬼元素定位在跟随鼠标的位置。但这让我们回到编写代码，重新实现API之外的拖动行为的核心部分。

Answer 3

查看jQuery UI的this部分。它允许您在原始位置保留原始位置时轻松创建拖动元素的重影。您还可以指定一个自定义“帮助器”来跟随光标。

Answer 4

根据StackOverflow上的this question，我们无法在拖动时更改可拖动对象的样式，但我们可以设置拖动图像。这将导致在拖动幻影对象时显示图像。

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

<强>解释

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

在此处查看有关dataTransfer的更多信息： Mozilla Developers - DataTransfer

控制HTML5拖放效果的外观

4 个答案: