Question

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

到目前为止，我只能在拖动时显示默认光标（除了不支持丢弃的无光标外）。

我不是在讨论以下任何一种情况：

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

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

感谢您的帮助。

Answer 1

嗨，要想使元素可拖动，就需要添加给定的代码来进行尝试

<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>

Answer 2

这是一个仅使用 CSS 的解决方案！

element:hover:active {
cursor: type;
}

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

Answer 3

你可以用css改变它

#buttonId:hover
{
cursor: value;
}

您可以在这里找到多个游标值：https://www.w3schools.com/cssref/pr_class_cursor.asp

Answer 4

所以你想在拖动元素的同时改变光标吗？

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

请参阅http://api.jqueryui.com/draggable/#option-cursor了解详情

HTML5拖放（DnD）：更改光标

4 个答案: