Html 控制 HTML5 拖放效果的外观
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17055044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Controlling the appearance of the HTML5 drag and drop effect
提问by Sergio
Is there a way to control the appearance of "what you are dragging" using the HTML5 Drag and Drop APIs?
有没有办法使用 HTML5 拖放 API 来控制“正在拖动的内容”的外观？
Normally, whatever HTML element is draggable is what becomes semi-transparent and follows your cursor until you stop/drop. I'd like to control that so that I can start my drag from anywhere inside an element, but when you actually start dragging, I can have only a small image follow the cursor, exactly where the cursor is.
通常，任何可拖动的 HTML 元素都会变成半透明并跟随您的光标直到您停止/放下。我想控制它，以便我可以从元素内的任何位置开始拖动，但是当您真正开始拖动时，我只能让一个小图像跟随光标，正好在光标所在的位置。
The practical example is: A list of things to drag, each is a small image and some text for the name of the thing you will be dragging to side of it. I'd like to be able to start my drag anywhere in the element over the image or text, but then only the image follows your cursor, and directly under the cursor, rather than offset from where you started dragging it.
实际示例是：要拖动的事物列表，每个列表都是一个小图像和一些文本，用于表示要拖动到其一侧的事物的名称。我希望能够在图像或文本上的元素中的任何位置开始拖动，但只有图像跟随您的光标，并直接位于光标下方，而不是从您开始拖动它的位置偏移。
I can think of a few ways to trick it (a hidden element that appears where you mouse cursor is, when you start to drag and is what you actually drag), or resort to classic Javascript drag and drop.
我可以想出几种方法来欺骗它（一个隐藏元素出现在你鼠标光标所在的位置，当你开始拖动时，就是你实际拖动的地方），或者诉诸经典的 Javascript 拖放。
Thanks
谢谢
回答by Sergio
I think .setDragImage(element, x, y);might be what you are looking for.
我想.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);
Example here: jsfiddle.net/cnAHv/
这里的例子：jsfiddle.net/cnAHv/
回答by Dean Hunt
Unfortunately, it looks like the spec was built to favor consistent native behavior over in-browser customization.
不幸的是，看起来该规范的构建是为了支持一致的本地行为而不是浏览器内的自定义。
We did a bunch of research and summarized our findings here:
我们进行了大量研究，并在此处总结了我们的发现：
https://www.inkling.com/engineering/native-html5-drag-drop/
https://www.inkling.com/engineering/native-html5-drag-drop/
The long and short, though, is that using a helper (like jQuery UI) or rolling your own is generally preferable if you need to do anything sophisticated.
不过，总而言之，如果您需要做任何复杂的事情，使用助手（如 jQuery UI）或滚动您自己的助手通常是更可取的。
Still, if you'd really like to use the native behavior and setDragImage() isn't adequate, there are a few alternatives.
尽管如此，如果您真的想使用本机行为而 setDragImage() 还不够，那么还有一些替代方法。
One particularly extravagant approach could involve hiHymaning the renderer to create a screenshot (!) of the element as you‘d like it to be styled, and then inserting it via a data URI.
一种特别奢侈的方法可能涉及劫持渲染器以创建元素的屏幕截图（！），因为您希望对其进行样式设置，然后通过数据 URI 插入它。
See: http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4
见：http: //cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4
A saner approach would be to simply absolutely position a ghost element to follow the mouse. But that takes us back to writing code that re-implements core parts of drag behavior outside of the API.
更明智的方法是简单地绝对定位一个幽灵元素来跟随鼠标。但这让我们回到编写代码，在 API 之外重新实现拖动行为的核心部分。
回答by Mohammad Areeb Siddiqui
According to this questionon StackOverflow, we cannot change the style of the draggable object while dragging it but we can set a drag image. This will cause a image to appear while dragging the ghost object.
根据StackOverflow上的这个问题，我们不能在拖动时更改可拖动对象的样式，但可以设置拖动图像。这将导致在拖动重影对象时出现图像。
event.dataTransfer.setDragImage(document.getElementById('div2'),50,50);
Explanation:
解释：
on dataTransferwe call a setDragImage()function in which we pass the ID of the div and give the position of where the image will appear when we will start dragging it.
在dataTransfer我们所谓的setDragImage()在我们通过DIV的ID，并给出该图像时会出现，我们将开始拖动位置的功能。
See more about dataTransferhere:
Mozilla Developers - DataTransfer
dataTransfer在此处查看更多信息：
Mozilla 开发人员 - DataTransfer
