控制HTML5拖放效果的外观

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/