HTML 5 拖放 - 使用自定义光标答案

【问题标题】：HTML 5 drag drop - Using custom cursorHTML 5 拖放 - 使用自定义光标
【发布时间】：2013-03-08 21:01:50
【问题描述】：

当 HTML 5 拖放 API 的拖动操作发生时，我实际上正在尝试使用自定义光标，但是当触发拖动事件时，我无法覆盖默认光标。这是我如何尝试实现它的代码，

$("#myDiv").live('mousedown', function(ev) {
  $(this).css("cursor", "url(res/customCursor.cur), default !important");
});

由于在拖动事件发生时会按下鼠标，因此我尝试在拖放目标的 mousedown 事件中更改光标。我也尝试过更改拖动事件的事件处理程序中的光标，但即使这样也不起作用。

【问题讨论】：

!important 在样式表或内联样式（IE6 除外）中可以正常工作，但在 JavaScript 或 jQuery 中设置样式时则不行。在这种情况下，带有!important 的样式不会在 Firefox、Chrome 和 IE8 或更早版本中应用。
为什么不创建一个类并使用jQuery中的addClass方法将其应用到被拖动的元素上？

【解决方案1】：

在您的样式表定义（

.dragAndDropInProgress {
  cursor: url(....), default !important; 
}

然后，当您发出 ondragstart 信号时，将该类附加到文档正文，确保在看到 ondragend 后再次将其删除。

【讨论】：