event.dataTransfer仅在drop生效，dragover中无法获取数据的问题

你遇到的是HTML5拖拽API的安全限制问题——默认情况下dragover事件中无法读取dataTransfer里的数据，只有drop事件能正常读取。浏览器出于安全考虑，限制了拖拽过程中数据的读取时机，dragover属于拖拽进行中的事件，此时未完成放置动作，所以默认无法获取dataTransfer中的数据。

以下是两种可行的解决方案：

方案一：使用全局变量存储拖动元素索引 #

直接用全局变量代替dataTransfer在dragover中传递数据，实现简单且兼容性好：

let draggedIndex = -1; // 全局变量存储拖动元素的索引

function dragStart(e) {
    draggedIndex = $(e.target).index();
    console.log('dragstart', draggedIndex);
    // 保留dataTransfer设置，确保drop事件正常工作
    e.dataTransfer.setData('text/plain', draggedIndex);
}

function sortableDropped(e) {
    console.log('drop', e.dataTransfer.getData('text/plain'));
    draggedIndex = -1; // 拖动完成后重置索引
}

function preventDefault(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
}

function dragOver(e) {
    preventDefault(e);
    console.log('dragover', draggedIndex); // 直接读取全局变量
}

function onLoad() {
    for (let item of document.querySelectorAll('.sortable-item')) {
        item.addEventListener('dragstart', dragStart);
        item.addEventListener('drop', sortableDropped);
        item.addEventListener('dragover', dragOver);
    }
}

onLoad();

方案二：配置dataTransfer权限 #

通过设置effectAllowed和dropEffect，让浏览器允许在dragover事件中读取数据：

function dragStart(e) {
    e.dataTransfer.setData('text/plain', $(e.target).index());
    e.dataTransfer.effectAllowed = 'move'; // 声明允许的拖拽操作类型
    console.log('dragstart', e.dataTransfer.getData('text/plain'));
}

function sortableDropped(e) {
    console.log('drop', e.dataTransfer.getData('text/plain'));
}

function preventDefault(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
}

function dragOver(e) {
    preventDefault(e);
    e.dataTransfer.dropEffect = 'move'; // 指定放置时的效果
    // 此时可以正常读取dataTransfer中的数据
    console.log('dragover', e.dataTransfer.getData('text/plain'));
}

function onLoad() {
    for (let item of document.querySelectorAll('.sortable-item')) {
        item.addEventListener('dragstart', dragStart);
        item.addEventListener('drop', sortableDropped);
        item.addEventListener('dragover', dragOver);
    }
}

onLoad();

两种方案都能让你在dragover事件中获取到拖动元素的索引，控制台会输出你期望的dragover 0结果。

内容的提问来源于stack exchange，提问作者nlblack323