HTML5 拖放 拖動時更改圖標/光標

Question

我想知道如何在拖動（dragover/dragenter）圖標/光標時進行更改，例如當我拖動輸入以拒絕或允許部分時。 當然，我可以使用 cursor 移動 DOM 的一部分絕對定位，但我對原生 HTML5 解決方案感興趣。

謝謝！

Answer 1

你在dropEffect之后：

在 dragstart 中初始化它：

event.dataTransfer.effectAllowed = "copyMove";

在 dragenter 中更新它：

event.dataTransfer.dropEffect = "copy";

Answer 2

我在這里有一個獨立的跨瀏覽器 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;
});

Answer 3

添加純 css 解決方案，這可能對少數人有用。 在 html 元素上使用這個類。

.grab {
        cursor: move;
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
        .thumbnails-list{
            cursor: pointer;
        }
    }

    .grab:active {
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing;
    }

Answer 4

我試圖實現相同的目標，但無法真正找到一個好的解決方案。 我最后所做的是將圖像設置到 dataTransfer 並在每次操作時更改其 src。 這樣，行為至少在瀏覽器之間是一致的。 這是我用作參考的頁面的鏈接：

https://kryogenix.org/code/browser/custom-drag-image.html

Answer 5

當且僅當在所有更改dropEffect的事件上調用ev.preventDefault()時，接受的答案才有效（不要在dragstart中調用它），如MDN中所述

Answer 6

這對我有用：

<div class="container">
    <div draggable="true">
    <div draggable="true">
</div>

$('.container').bind('dragover', function() {
    $('body').addClass('dragging');
});
$('.container').bind('dragleave', function() {
    $('body').removeClass('dragging');
});

.container > div {
    cursor: grab;
}
body.dragging .container > div {
    cursor: grabbing;
}

https://jsfiddle.net/cLb3hxtf/1/

Answer 7

請閱讀禁止標志是否已經或正在讓您發瘋： preventDefault()需要 go 在目標元素上。 附在文件上的這條線終於為我解決了

document.addEventListener("dragover", (event) => {
    event.preventDefault();
});