HTML5 Drag & Drop 在拖动时更改光标（不要使用 UI）

Posted 2023-03-04

【中文标题】HTML5 Drag & Drop 在拖动时更改光标（不要使用 UI）

【英文标题】：HTML5 Drag & Drop change cursor while dragging (don't use UI)

【发布时间】：2015-03-04 20:22:34

【问题描述】：

我想在拖动的时候改变cursor，所以我这样尝试：

function drag (event) 

    localStorage.setItem("no", $(event.target).data("no"));

    $("html").css("cursor", "move");

<tr draggable="true" class="memo_item move" id="memo_<?php echo $memo->memo_no?>" ondragstart="drag(event, this);" data-no="<?php echo $memo->memo_no?>"></tr>

但它不起作用。

我不能使用JQueryUi。

如何更改光标？

【参考方案1】：

只需在您的代码中实现这种事件设置...

$('<some element here>').on('dragstart', function() 
  $(this).css("cursor", "move");
);

但是，这将永久更改元素上的光标，以切换此光标更改添加

$('<some element here>').on('dragend', function() 
  $(this).css("cursor", "default"); // or whatever pointer you want to revert to
);

【讨论】：

以上代码只是使用jQuery注册H5拖动事件。没有 jQuery UI。 @NathanHornby 顺便说一句，我们似乎不能只拖动光标。

我的错误。它们出现在 jQuery UI 文档中，但没有出现在 jQuery 文档中，这让我不相信 - 没有意识到它们是作为 DragEvent 接口的一部分的原生事件developer.mozilla.org/en-US/docs/Web/API/DragEvent

这不会改变光标。我不知道有什么方法可以做到这一点，因为 HTML5 拖动锁定了指向 default 的指针。

我不确定这里的意图。但是您不需要 js 来更改悬停时的光标。没有任何东西将光标锁定到default。 jsfiddle.net/8nh6ekbp

拉斐尔的小提琴（ jsfiddle.net/8nh6ekbp ）不起作用。光标确实被锁定了