如何在拖动操作期间根据悬停的元素条件更改拖放光标

时间:2014-08-04 22:35:01

标签: javascript html5 drag-and-drop cursor

要点是我想根据它悬停的元素的条件更改拖放光标。我的理解是拖动光标基于源"effectAllowed"和目标"dropEffect"的组合。我已设置effectAllowed="copy",因此光标指示可以复制数据。但根据目标的某些条件,我可能希望目标位于dropEffect="none"="copy"。无论我做什么,我都无法将光标显示为"none"当它悬停在我有时希望成为放置目标的目标上时,有时不会。我可以阻止数据丢失,但我无法更改光标,以便用户获得可见的提示。我希望当光标从可放置区域移动到不可放置区域时发生相同的效果。

更多细节:我正在使用HTML5 drag-n-drop。我有一个单列表,其td元素是可拖动的,我的ondragstart处理程序如下所示:

dragStartHandler(event){
    event.dataTransfer.effectAllowed = "copy";
    event.dataTransfer.setData("text/plain", $(event.target).text());
}

我有一个两列表,其中发生了丢弃。这些td元素的ondragover处理程序只运行event.preventDefault()。但是,每列我都有不同的ondragenter处理程序。对于第一列,ondragenter处理程序只运行event.preventDefault()。对于第二列,我添加了

if (x) {event.dataTransfer.dropEffect = "none";};

我有适当的ondrop和ondragleave处理程序,除了控制光标的能力外,一切都很好。我已经阅读了许多其他想要更改光标的问题,但我没有找到一个试图在拖动操作期间根据它悬停的元素的条件来更改它。有没有办法做到这一点?

0 个答案:

没有答案