Html 拖放项的本机拖放检查'；身份证

我想检查是否使用本机拖放将id==itemId的项拖放到可拖放元素上

function dragDrop(itemId){        

    var droppable = document.querySelector('#droppableElement');

    addEvent(droppable, 'drop', function(e){
        if (e.preventDefault){
            e.preventDefault();
        }
        // How do I check that the id of the dropped item === itemId    
        if (e.dataTransfer.getData('id') === itemId){ 
            alert('Successfuly dropped item with id = ' itemId + '.');
        }
    });
}

draggableItem = document.querySelector('#draggable');
dragDrop(draggableItem);

评论是我需要帮助的地方。这是我的出发点。

---

当触发

ondragstart

事件时，应将数据传输的数据设置为正在传输的元素的id。因此，您的代码是：

function dragDrop(itemId){        

    var droppable = document.querySelector('#droppableElement');
    addEvent(droppable, 'drop', function(e){
        if (e.preventDefault){
            e.preventDefault();
        }
        if (e.dataTransfer.getData('id') == itemId){ 
            alert('Successfuly dropped item with id = ' itemId + '.');
        }
    });
}

draggableItem = document.querySelector('#draggable');
addEvent(draggableItem, "dragstart", function(e) {
    e.dataTransfer.setData('id', this.id);
});
dragDrop(draggableItem.id);

---

来源：

我甚至没有在我的drop事件中获得“数据传输”属性：-(