拖动 DOM 元素时有啥方法可以改变光标样式吗？

Posted 2023-05-08

【中文标题】拖动 DOM 元素时有啥方法可以改变光标样式吗？

【英文标题】：Is there any way to change the cursor style when dragging DOM element?拖动 DOM 元素时有什么方法可以改变光标样式吗？

【发布时间】：2016-06-06 06:03:37

【问题描述】：

我有一个draggable = true DOM 元素，我想在拖动该元素时更改默认光标样式。

这里有一些代码：

function dragstart(e)
    element.style.cursor = 'move';


element.addEventListener('dragstart', dragstart, false);

请注意：不只是像使用 css 的图像自定义光标。

有什么办法吗？

【问题讨论】：

你在用jquery ui吗？

您希望光标看起来像什么？它是自定义图像还是现有图像？

Custom Cursor Image CSS的可能重复

@mmativ 不，只是原生 ui。

@SoorajChandran 是的，就像 css 中的 cursor: move :)

【参考方案1】：

使用e.target

function dragstart(e)
     e.target.style.cursor = "move";
    

尝试使用 jQuery

function dragstart(e)
 $(this).css("cursor","move");

【讨论】：

这根本没有任何意义。 e 是 MouseEvent 对象的一个​​实例。 style 在这种情况下是未定义的。您的意思可能类似于e.target 或类似的意思吗？

是的，我在我的项目中添加了 jQuery。

你检查过事件是否被调用了吗？

是的，我在dragstart 函数中添加了console.log('drag event')，Chrome 确实记录了这条消息。我认为Chrome只是不支持通过html5原生拖动事件拖动DOM元素时更改光标样式。

我也无法让它工作。这也不是代码的错。我怀疑有一些奇怪的影子 DOM 正在发生。我尝试设置元素的样式：output.jsbin.com/notihesowe。我还尝试设置根元素的样式和，包括*cursor:inherit !important:output.jsbin.com/xizujohuxu。只是想看看它是否创建了一个可定位的影子 DOM 元素，但没有任何效果。