使用JavaScript全局覆盖鼠标光标

在我的Web应用程序中,我尝试实现一些拖放功能.我有一个全局的 JavaScript组件,这是基本的东西.此对象还负责根据当前拖动操作(移动,复制,链接)更改鼠标光标.在我的网页上有各种HTML元素,它们定义了一个自己的光标样式,不管是内联还是通过CSS文件.

那么,我的中央拖放组件是否可以全局更改鼠标光标,与鼠标光标所在元素的风格无关？

我试过了：

document.body.style.cursor = "move"

和

document.body.style.cursor = "move !important"

但它不行.每次拖动定义游标样式的元素时,游标将变为该样式.

当然,我可以改变我当前拖动的元素的样式,但是当我使用元素时,我必须重置它.这似乎有点复杂.我正在寻找一个全球解决方案.

解决方法

请：不要屠杀你的CSS！

要实现拖放操作,您必须使用非常重要的API：element.setCapture().这有以下后果：

>所有的鼠标事件被重定向到捕获的目标元素,无论它们在哪里发生(甚至在浏览器窗口之外)
>光标将是捕获目标元素的光标,无论鼠标指针在何处.

您必须调用element.releaseCapture()或document.releaseCapture()才能在操作结束时切换回正常模式.

小心拖放的天真的实现：你可以有很多痛苦的问题,例如(其中包括)：如果鼠标在浏览器的窗口之外或在具有停止传播的处理程序的元素上重新启动,会发生什么.使用setCapture()解决所有这些问题,以及光标样式.

您可以阅读this excellent tutorial,详细解释这一点,如果你想实现拖放自己.

也许你也可以在你的上下文中使用jQuery UI draggable.