控制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/

Answer 2

不幸的是,看起来规范是为了支持浏览器内定制中的一致本机行为而构建的.

我们做了一系列研究并在此总结了我们的发现:

https://www.inkling.com/engineering/native-html5-drag-drop/

不过,无论是长期还是短期,如果您需要做任何复杂的事情,通常最好使用助手(如jQuery UI)或自己滚动.

尽管如此,如果你真的想使用原生行为并且setDragImage()还不够,还有一些选择.

一种特别奢侈的方法可能涉及劫持渲染器以创建元素的屏幕截图(!),因为您希望对其进行样式化,然后通过数据URI插入它.

请参阅:http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4

更安全的方法是简单地将鬼元素定位在跟随鼠标的位置.但这让我们回到编写代码,重新实现API之外的拖动行为的核心部分.