HTML5拖放拖动时更改图标/光标

Question

我想知道如何在拖动(dragover/dragenter)图标/光标期间更改,例如,当我使用degen或允许部分时.当然,我可以用光标移动绝对定位的DOM的一部分,但我对本机HTML5解决方案感兴趣.

谢谢!

Answer 1

你是在dropEffect之后:

在dragstart中初始化它:

event.dataTransfer.effectAllowed = "copyMove";

在dragenter中更新它:

event.dataTransfer.dropEffect = "copy";

Answer 2

我在这里有一个独立的crossbrowser HTML5拖放示例:http://jsfiddle.net/rvRhM/1/

看看dragstart和dragend事件.dm是被拖动的元素.

EventUtil.addHandler(dm, 'dragstart', function(e) {
    e.dataTransfer.setData(format, 'Dragme');
    e.dataTransfer.effectAllowed = effect;
    var target = EventUtil.getCurrentTarget(e);
    target.style.backgroundColor = 'blue';
    target.style.cursor = 'move'; // You can do this or use a css class to change the cursor
    return true;
});

拖动结束时确保重置光标:

EventUtil.addHandler(dm, 'dragend', function(e) {  
    var target = EventUtil.getCurrentTarget(e);
    target.style.backgroundColor = '';
    target.style.cursor = 'default'; // Reset cursor
    return true;
});