如何控制HTML5拖放效果的外观?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (45)

有没有办法使用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);
用户回答回答于

不幸的是,它看起来好像是为了支持浏览器内定制的一致本机行为。

长期和短期的是如果你需要做任何复杂的事情,使用助手(如jQuery UI)或自己动手一般是比较好的选择。

如果你真的想使用本地行为,并且setDragImage()不够用,还有几个选择。

一种特别奢侈的方法可能涉及劫持渲染器,以创建该元素的截图(!),然后将其插入到数据URI中。

一个更为明智的方法是简单地定位一个ghost元素来跟随鼠标。但是,这又让我们回到编写代码来重新实现API以外的拖动行为的核心部分。

扫码关注云+社区

领取腾讯云代金券