Native Drag and Drop проверяет наличие идентификатора выпавшего предмета

Question

Я хотел бы проверить, не был ли предмет с идентификатором === 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);

В комментариях мне нужна помощь.Эта ссылка была моей отправной точкой.http://html5doctor.com/native-drag-and-drop

Answer 1

Когда происходит событие ondragstart, вы должны установить для данных dataTransfer идентификатор элемента, который вы передаете.Итак, ваш код будет:

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 Доктор