上期介绍了html与js拖动的知识点，这一期我们来实现下拖动排序
思路
- 在一个列表中，每个元素都可以被拖放，那首先要给每个元素设置 draggable 属性为 true。
- 监听每个元素的 dragstart 事件，对源对象做样式处理来区分。
- 监听每个元素的 dragenter 事件，当源对象进入到当前元素里，就把源对象添加到该元素之前。这样子后面的元素就会被源对象挤下去了，实现了排序的效果。
- 但是会发现，源对象无法排到最后一个去，只能在倒数第二。这时就要监听 dragleave 事件，当过程对象是最后一个元素时，源对象离开了过程对象，这时就把源对象添加到最后去。
主要代码如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
// index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>drag demo</title> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; } #app{ position: relative; width: 100%; height: 100%; max-width: 980px; margin: auto; } .list{ padding:10px; height: 20px; border-bottom: 1px solid #ddd; } #recycle{ position: absolute; bottom: 0; width: 100%; height: 70px; line-height: 70px; text-align: center; background: #ddd; } </style> </head> <body> <div id="app"> <div class="main"> <div class="list" draggable="true">这里是列表1的标题</div> <div class="list" draggable="true">这里是列表2的标题</div> <div class="list" draggable="true">这里是列表3的标题</div> <div class="list" draggable="true">这里是列表4的标题</div> <div class="list" draggable="true">这里是列表5的标题</div> <div class="list" draggable="true">这里是列表6的标题</div> <div class="list" draggable="true">这里是列表7的标题</div> </div> <div id="recycle">回收站</div> </div> <script src="index.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// index.js var iosDragDropShim = { enableEnterLeave: true } // 兼容移动端 var source = document.querySelectorAll('.list'), recycle = document.getElementById('recycle'), dragElement = null, // 用于存放拖动元素 lock = true; // 最后元素拖放拖放时会进入enter和leave的循环，用来锁住 for(var i = 0; i < source.length; i++){ source[i].addEventListener('dragstart',function(ev){ dragElement = this; // 用于存放拖动元素 this.style.backgroundColor = '#f8f8f8'; // 设置拖动元素的背景 },false); source[i].addEventListener('dragend',function(ev){ ev.target.style.backgroundColor = '#fff'; // 拖放结束还原拖动元素的背景 ev.preventDefault(); },false) source[i].addEventListener('dragenter', function(ev){ if(dragElement != this){ this.parentNode.insertBefore(dragElement,this); // 把拖动元素添加到当前元素的前面 } }, false) source[i].addEventListener('dragleave', function(ev){ console.log(111); if(dragElement != this){ if(lock && (this == this.parentNode.lastElementChild || this == this.parentNode.lastChild)){ // 当前元素时最后一个元素 this.parentNode.appendChild(dragElement); // 把拖动元素添加最后面 lock = false; }else{ lock = true; } } }, false) }; recycle.addEventListener('drop', function(ev){ // 拖进回收站则删除该元素 dragElement.parentNode.removeChild(dragElement); }, false) document.ondragover = function(e){e.preventDefault();} // 必须设置dragover阻止默认事件 document.ondrop = function(e){e.preventDefault();} |
实现效果：
当然，代码比较繁琐，最简单的方式就是去github上找lib，只需一行代码即可实现拖放排序