HTML5 拖放 (DnD)：更改光标答案

【问题标题】：HTML5 Drag and Drop (DnD): changing cursorHTML5 拖放 (DnD)：更改光标
【发布时间】：2013-02-02 13:25:44
【问题描述】：

在 HTML5 的浏览器客户区上拖动元素时，如何将光标更改为我想要的任何光标？

到目前为止，我只能在拖动时显示默认光标（除了不支持拖放的地方没有光标）。

我不是在谈论以下任何事情：

使用event.dataTransfer.setDragImage()在光标旁边显示图像
使用event.dataTransfer.dropEffect在光标旁边显示副本或链接符号，或将光标更改为无符号
在 Firefox 中，使用 event.dataTransfer.mozCursor，因为它只能执行默认的系统行为，或者显示箭头光标，这两者都没有帮助（此外，我想要跨浏览器支持，虽然我主要针对 Chrome )

我尝试了许多其他技巧，包括使用 CSS :hover 和 :focus，以及许多 JavaScript 技巧，但均无济于事。

感谢您的帮助。

【问题讨论】：

我认为使用 html 5 拖放（而不仅仅是普通的鼠标移动）时无法更改光标。我认为这是出于安全考虑，以确保网页不会试图诱使用户认为放入某个区域的行为会与预期不同。我只是切换到使用普通鼠标移动而不是拖放。
我也有同样的问题。我同意你的看法。我们可能需要切换回 mousedown/mousemove 事件而不是 H5 Dnd
我认为您需要定位“可放置”。类似document.querySelector('.droppable').style.cursor = 'whatever'
你为什么不在这里尝试解决方案stackoverflow.com/a/27811047/3513687
这能回答你的问题吗？ Custom cursor with drag and drop an HTML element without libraries

标签： html drag-and-drop mouse-cursor

【解决方案1】：

所以您想在拖动元素时更改光标？

$('YourElement').draggable({
     cursor: "crosshair"
});

查看http://api.jqueryui.com/draggable/#option-cursor了解更多信息

【讨论】：

【解决方案2】：

嗨，试试这个，让一个元素可拖动需要添加给定的代码

<script>
function dragstart_handler(ev) {
// Add the target element's id to the data transfer object
ev.dataTransfer.setData("text/plain", ev.target.id);
}

window.addEventListener('DOMContentLoaded', () => {
// Get the element by id
const element = document.getElementById("p1");
// Add the ondragstart event listener
element.addEventListener("dragstart", dragstart_handler);
});
</script>

<p id="p1" draggable="true">This element is draggable.</p>

【讨论】：

如何改变鼠标光标？

【解决方案3】：

这是一个纯 CSS 的解决方案！

element:hover:active {
cursor: type;
}

只需将元素选择器放在元素所在的位置并指定一个光标。这有点小技巧，因为它不检测拖动，只同时悬停和点击。

【讨论】：

【解决方案4】：

你可以用css改变它

#buttonId:hover {
    cursor: value;
}

您可以在此处找到多个光标值：https://www.w3schools.com/cssref/pr_class_cursor.asp

【讨论】：

【解决方案5】：

为此，您可以按如下方式使用 CSS：

#buttonID:hover:active {
cursor: *cursor-type*;
}

您可以使用几种游标类型，它们是：

帮助; - 将显示默认光标，旁边有一个小问号

等待; - 将显示您的操作系统的默认加载光标动画

十字准线; - 会给你一个十字准线光标

不允许; - 将为您的光标显示一个 ? 图标

放大; - 将显示一个带有加号的放大镜

抢; - 将展示一只手，我认为这只最适合您的需求。

这些都是我所知道的 cursor: 属性。你可能会发现一些有用的东西。

【讨论】：