var target = document.querySelector('#drop-target'); var dragElements = document.querySelectorAll('#drag-elements li'); var elementDragged = null; for (var i = 0; i < dragElements.length; i++) { dragElements[i].addEventListener('dragstart', function(e) { e.dataTransfer.setData('text', this.innerHTML); elementDragged = this; }); dragElements[i].addEventListener('dragend', function(e) { elementDragged = null; }); } target.addEventListener('dragover', function(e) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; return false; }); target.addEventListener('drop', function(e) { e.preventDefault(); e.stopPropagation(); this.innerHTML = 'Dropped ' + e.dataTransfer.getData('text'); document.querySelector('#drag-elements').removeChild(elementDragged); return false; });
<ul id="drag-elements"> <li draggable="true">A</li> <li draggable="true">B</li> <li draggable="true">C</li> </ul> <ul id="drop-target"></ul>
ul{ min-height:100px; background-color:#EEE; margin:20px; } ul li{ background-color:#CCC; padding:10px; margin-bottom:10px; }