Drag and drop list view rearrange items in the ul li list just by dragging them around link rel stylesheet href https maxcdn bootstrapcdn com font awesome 4 5 0 css font awesome min css style ul icon space 1 3em list style none padding 0 li padding left var icon space li before content f07b f00c FontAwesome Unicode font family FontAwesome display inline block margin left calc var icon space 1 width var icon space style script let dragged let id let index let indexDrop let list document addEventListener dragstart target dragged target id target id list target parentNode children for let i 0 i list length i 1 if list i dragged index i document addEventListener dragover event event preventDefault document addEventListener drop target if target className dropzone target id id dragged remove dragged for let i 0 i list length i 1 if list i target indexDrop i console log index indexDrop if index indexDrop target before dragged else target after dragged script ul li class dropzone id 0 draggable true List item 1 li li class dropzone id 1 draggable true List item 2 li li class dropzone id 2 draggable true List item 3 li li class dropzone id 3 draggable true List item 4 li li class dropzone id 4 draggable true List item 5 ul li class dropzone id a0 draggable true aList item 1 li li class dropzone id a1 draggable true aList item 2 li li class dropzone id a2 draggable true aList item 3 li li class dropzone id a3 draggable true aList item 4 li li class dropzone id a4 draggable true aList item 5 li ul li ul
target id id dragged remove dragged for let i 0 i list length i 1 if list i target indexDrop i console log index indexDrop if index indexDrop target before dragged else target after dragged script ul li class dropzone id 0 draggable true List item 1 li li class dropzone id 1 draggable true List item 2 li li class dropzone id 2 draggable true List item 3 li li class dropzone id 3 draggable true List item 4 li li class dropzone id 4 draggable true List item 5 ul li class dropzone id a0 draggable true aList item 1 li li class dropzone id a1 draggable true aList item 2 li li class dropzone id a2 draggable true aList item 3 li li class dropzone id a3 draggable true aList item 4 li li class dropzone id a4 draggable true aList item 5 li ul li ul