Practice the drag and drop API in HTML5 to realize list drag and drop movement! Reference article: JS HTML5 drag and drop upload image preview
Implementation of HTML5 drag and drop mobile list:
1. Loop to set the draggable attribute of each child, and set the drag mark (no more than one or all children will be moved)
2. Every time you enter the delivery area, there will be a drag and drop mark during detection, and if there is, add the dom element, and so on.
Another implementation idea is: you can use the DataTransfer object in drag and drop as a property, use the setData() and getData() methods to pass the id of each dragged child, and find the specified child to move... to experiment. . .
HTML:
//Empty list<div id="box"></div>//Content list<ul id="con"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li></ul>
JS:
<script> function $(id) { return document.getElementById(id); } var con = $("con"); var box = $("box"); var liDoms = document.getElementsByTagName("li"); var i = 0, len = liDoms.length; //Loop to set the draggable property of each child, and drag the mark in time for (; i < len; i += 1) { liDoms[i].draggable = 'true'; liDoms[i].flag = false; liDoms[i].ondragstart = function() { this.flag = true; }; liDoms[i].ondragend = function() { this.flag = false; }; } //Trender event $("box").ondragenter = function(e) { e.preventDefault(); console.log('entry'); }; $("box").ondragover = function(e) { e.preventDefault(); console.log('move'); }; $("box").ondragleave = function(e) { e.preventDefault(); console.log('leave'); }; $("box").ondragleave = function(e) { e.preventDefault(); for (var i = 0; i < liDoms.length; i += 1) { if (liDoms[i].flag) { box.appendChild(liDoms[i]); } } console.log('success'); }; //Trouting area event $("con").ondrager = function(e) { e.preventDefault(); console.log('Enter'); }; $("con").ondragover = function(e) { e.preventDefault(); console.log('Move'); }; $("con").ondragover = function(e) { e.preventDefault(); console.log('Leave'); }; $("con").ondrop = function(e) { e.preventDefault(); for (var i = 0; i < liDoms.length; i += 1) { if (liDoms[i].flag) { // At this time, the box object is li, not the original container's li. $("con").appendChild(liDoms[i]); } } console.log('Success'); }; </script>Reproduction image:
The above is all about this article, I hope it will be helpful to everyone's learning.