html - 控制HTML5拖放效果的外观

有没有一种方法可以使用HTML5拖放API控制“所拖动内容”的外观？

通常，任何可拖动的HTML元素都是半透明的，并跟随您的光标直到您停止/放置。我想进行控制，以便可以从元素内的任何位置开始拖动，但是当您实际开始拖动时，只能在光标后面跟随一小幅图像，即光标所在的位置。

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

我可以想到几种方法来欺骗它(隐藏的元素会出现在您的鼠标指针所在的位置，当您开始拖动时才是实际拖动的对象)，或者诉诸经典的Javascript拖放。

谢谢

最佳答案

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