Практикуйте API Drag and Drop в HTML5, чтобы реализовать движение Drag and Drop! Справочная статья: JS HTML5 ПРЕДЛОЖЕНИЕ ПРЕДУПРЕЖДЕНИЕ ПРЕДУПРЕЖДЕНИЕ ИЗОБРАЖЕНИЯ
Реализация списка мобильных устройств HTML5 Drag and Drop:
1. Цикл, чтобы установить атрибут Draggable каждого ребенка и установить знак перетаскивания (не более одного или всех детей будут перемещены)
2. Каждый раз, когда вы входите в зону доставки, во время обнаружения будет отметка перетаскивания, а если есть, добавьте элемент DOM и так далее.
Другая идея реализации : вы можете использовать объект DataTransfer в перетаскивании в качестве свойства, использовать методы setData () и getData () для передачи идентификатора каждого перетаскиваемого ребенка и найти указанного ребенка для движения ... для эксперимента. Полем Полем
HTML:
// пустой список <div id = "box"> </div> // Список контента <ul id = "con"> <li> пункт 1 </li> <li> пункт 2 </li> <li> пункт 3 </li> <li> Пункт 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; // цикл, чтобы установить перетаскиваемое свойство каждого ребенка, и перетаскивать знак во времени для (; i <len; i += 1) {lidoms [i] .daggable = '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 ('оставить'); }; $ ("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 ('успех'); }; // Событие области форели $ ("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 ('оставить'); }; $ ("con"). ondrop = function (e) {e.preventDefault (); for (var i = 0; i <lidoms.length; i += 1) {if (lidoms [i] .flag) {// В настоящее время объект коробки - это не исходный контейнер LI. $ ("con"). AppendChild (Lidoms [i]); }} console.log ('успех'); }; </script>Изображение воспроизведения:
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.