在 Firefox 和 IE 中，如何在拖动不同目标时更改光标？答案

【问题标题】：In Firefox and IE how can change the cursor while dragging over different targets?在 Firefox 和 IE 中，如何在拖动不同目标时更改光标？
【发布时间】：2014-06-02 18:25:56
【问题描述】：

在 HTML5 中进行拖放，我需要能够根据放置目标更改光标。在 Chrome 中，这通过更改 dropEffect 来工作，

 if (e.currentTarget.id == 'dropMove') {
     e.originalEvent.dataTransfer.dropEffect = 'move';
 } else {
     e.originalEvent.dataTransfer.dropEffect = 'link';
 }

但是在 IE 和 Firefox 中更改 dropEffect 对光标没有影响。请参阅以下小提琴：

http://jsfiddle.net/ksoncan34/s7kN5/

我尝试使用 window.cursor 手动设置光标，但这也没有效果。如何更改 Firefox 和 IE 中不同放置目标的光标？

【问题讨论】：

您使用的是哪个操作系统和浏览器版本？
Windows 7 和 8.1，浏览器是最新的 Firefox (29.0.1) 和 IE 11。
我在 Ubuntu 上使用最新的 Firefox，两个光标都可以正常工作。
在 OS X 10.9.3 上的 Firefox 29.0.1 和 25.0 中运行良好。听起来这可能是一个仅限 Windows 的错误。
在带有 FF 29.0 的 Xubuntu 14.04 和 Chromium 上工作（如果这对您有任何相关性），光标似乎只在 drop move 字段上而不是在删除链接字段。

标签： javascript html firefox drag-and-drop

【解决方案1】：

我建议使用 jQuery ui -- 可拖放和可拖动。

您可以使用 cursor: none 隐藏默认/实际光标，并使用风格化的 DOM 元素来呈现您自己的“光标”元素。

我在这里提供了一个示例： http://jsfiddle.net/lawrencealan/WMyu7/78/ （2017 年 6 月 8 日更新）

注意：mousemove 在拖动“可拖动”属性元素时停止触发。

编辑：截至 2019 年 9 月，该示例现已失效。

【讨论】：

希望该示例不是使用 jQueryUI 构建的，因为我不想构建该依赖项，但是关闭光标并创建伪光标是我见过的最佳解决方案远的。谢谢。
好吧，您始终可以使用仅具有 draggable 和 droppable 功能的自定义 jqueryui 构建，或自行实现该功能。只需要跟踪mousedown、mousemove 和mouseup 事件......更不用说触摸了。例如，我不打算这样做...也许有一天我很无聊时；）-查看ramkulkarni.com/blog/simple-dragdrop-with-javascript-jquery
在我看来，建议使用其他东西不是一个有效的答案

【解决方案2】：

不幸的是，.dropeffect 似乎缺少对光标更改的支持。

您可以尝试将一个元素附加到鼠标的 X 和 Y 坐标上并在它移动时对其进行操作，但它可能会变得混乱。我认为 lawrencealan's jQuery UI solution 就是这样做的，它可能是唯一可靠的方法......而且实际上非常简单。我仍然想建议一个替代方案，它可能也适合您的需求，并且不需要 jQuery UI：

替代方案：

我建议不要将代码绑定到 mousemove 并处理不可靠的光标操作，而是让目标在拖动时改变它们的外观。

例如：jsfiddle

在你的拖拽功能中添加这样的东西：

$(this).addClass('draggedover');

确保在 dragleave 时将其删除：

$('.drop').bind('dragleave', function (e) {
    $(this).removeClass('draggedover');
});

然后添加一些 CSS 来配合它：

.draggedover::before {
    content: '';
    background-image: url('http://i.stack.imgur.com/czlkT.jpg');
    width: 40px;
    height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
}
#dropMove.draggedover::before {
    background-position: -110px -70px;
}

#dropLive.draggedover::before {
    background-position: -5px -10px;
}

【讨论】：

【解决方案3】：

我在搜索时发现了这个链接： https://connect.microsoft.com/IE/feedback/details/780585/dropeffect-not-working-properly-in-ie-standard-mode-ie9-ie10

看起来微软拒绝这样做，因为它是按设计工作的。可能有帮助的是第三条评论，它提出了解决可用性问题的方法。不过，他没有分享任何代码。

【讨论】：