Question

我想查看是否使用本机拖放功能将具有id === itemId的项目放在droppable元素上。

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);

评论是我需要帮助的地方。这个链接是我的出发点。 http://html5doctor.com/native-drag-and-drop

Answer 1

当触发ondragstart事件时，您应该将dataTransfer的数据设置为您要传输的元素的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);

资料来源：HTML5 Doctor

已删除项目的ID的本机拖放检查

1 个答案: