javascript - Why does HTML5 Drag n Drop target child? (Sortable List) -

when attempt create sortable list html5 drag n drop, target of drop event (e.target) child of drop-zone element, rather drop-zone element itself. bad.

i want value of e.target in following code div contains ondrop="drop(event)" rather it's <p> child.

link jsfiddle full example.

function drop(e) {     e.preventdefault();     var data = e.datatransfer.getdata("text");     e.target.appendchild(document.getelementbyid(data));    } 

is happening because of event bubbling, or similar? best fix me create drag n drop sortable list?

edit: looking understand native html5 , javascript, not use jquery library or such.

you trying append target element, hence facing problem.

you should try insert element before target element.

function drop(e) {     e.preventdefault();      var data = e.datatransfer.getdata("text");     var list = document.getelementbyid("list");     list.insertbefore(document.getelementbyid(data), e.target.parentnode); } 

here updated fiddle