控制HTML5拖放效果的外观
有没有一种方法可以使用HTML5拖放API来控制“您正在拖动的内容”的外观？
通常，任何可拖动的HTML元素都是半透明的，并跟随光标，直到您停止/拖放。我想控制它，这样我就可以从元素内的任何地方开始拖动，但是当你真正开始拖动时，我只能让一个小图像跟随光标，准确地说光标在哪里。
一个实际的例子是:一个要拖动的东西的列表，每个都是一个小图像和一些文本，用于你要拖到它旁边的东西的名称。我希望能够在元素中的任何位置拖动图像或文本，但之后只有图像跟随光标，直接位于光标下方，而不是从开始拖动的位置偏移。
我可以想出几种方法来欺骗它(当你开始拖动时，隐藏元素会出现在鼠标光标所在的位置，实际上就是你要拖动的元素)，或者求助于经典的Javascript拖放。
谢谢
回答 2
Stack Overflow用户
发布于 2013-06-18 03:21:04
我想.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/
Stack Overflow用户
发布于 2013-11-09 16:38:12
不幸的是，该规范看起来更倾向于一致的本机行为，而不是浏览器内的定制。
我们做了一系列研究，并在这里总结了我们的发现：
https://www.inkling.com/engineering/native-html5-drag-drop/
不过，总而言之，如果你需要做任何复杂的事情，使用帮助器(如jQuery UI)或滚动自己的帮助器通常是更可取的。
不过，如果您真的想使用本机行为，而setDragImage()还不够，还有一些替代方法。
一种特别奢侈的方法可能涉及劫持渲染器来创建屏幕截图(!)元素的样式，然后通过数据URI插入它。
请参阅：http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4
一种更明智的方法是简单地绝对定位一个重影元素，使其跟随鼠标。但这会让我们回到编写代码，在API之外重新实现拖动行为的核心部分。
https://stackoverflow.com/questions/17055044
复制相似问题