有没有一种方法可以使用 HTML5 拖放 API 来控制“正在拖动的内容”的外观？
通常情况下，任何可拖动的 HTML 元素都会变为半透明并跟随光标直到您停止/放下。我想控制它，这样我就可以从元素内的任何地方开始拖动，但是当你真正开始拖动时，我只能让一个小图像跟随光标，正好在光标所在的位置。
实际示例是：要拖动的东西的列表，每个都是一个小图像和一些文本，用于您将要拖动到它旁边的东西的名称。我希望能够在图像或文本上的元素中的任何位置开始拖动，但是只有图像跟随您的光标，并且直接位于光标下方，而不是从您开始拖动它的位置偏移。
我可以想出一些方法来欺骗它（一个隐藏元素出现在鼠标光标所在的位置，当你开始拖动并且是你实际拖动的东西），或者诉诸经典的 Javascript 拖放。
谢谢
【问题讨论】：
标签： html drag-and-drop draggable appearance
我认为.setDragImage(element, x, y); 可能是您正在寻找的。p>
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/
【讨论】：
不幸的是，该规范似乎是为了支持一致的本机行为而不是浏览器内自定义。
我们进行了大量研究并在这里总结了我们的发现：
https://www.inkling.com/engineering/native-html5-drag-drop/
不过，总而言之，如果您需要做任何复杂的事情，通常最好使用帮助程序（如 jQuery UI）或滚动您自己的。
不过，如果您真的想使用本机行为并且 setDragImage() 不够用，还有一些替代方案。
一种特别奢侈的方法可能涉及劫持渲染器以创建您希望设置样式的元素的屏幕截图 (!)，然后通过数据 URI 插入它。
见：http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4
更明智的方法是简单地绝对定位幽灵元素以跟随鼠标。但这让我们回到编写代码，在 API 之外重新实现拖动行为的核心部分。
【讨论】：
根据 StackOverflow 上的this question，我们不能在拖动时更改可拖动对象的样式，但我们可以设置拖动图像。这将导致在拖动重影对象时出现图像。
event.dataTransfer.setDragImage(document.getElementById('div2'),50,50);
说明：
在dataTransfer 上，我们调用setDragImage() 函数，在该函数中我们传递div 的ID 并给出开始拖动时图像出现的位置。
在此处查看有关dataTransfer 的更多信息：
Mozilla Developers - DataTransfer
【讨论】：