Question

在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中不同放置目标的光标？

Answer 1

我建议使用jQuery ui - droppable和draggable。

您可以使用cursor: none隐藏默认/实际光标，并使用程式化的DOM元素渲染您自己的'光标'元素。

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

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

Answer 2

不幸的是，.dropeffect上对游标更改的支持似乎缺乏。

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

<强>替代：

除了将代码绑定到mousemove并处理不可靠的游标操作之外，我建议只需让目标在拖动它们时改变它们的外观。

例如： jsfiddle

在您的dragover函数中添加以下内容：

$(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;
}

Answer 3

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

看起来微软拒绝将其视为设计工作。可能有帮助的是提出修复可用性问题的方法的第3条评论。但他并没有分享任何代码。

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

3 个答案: