大佬教程收集整理的这篇文章主要介绍了基于html5拖拽api实现列表的拖拽排序,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
基于html5拖拽api实现列表的拖拽排序
<ul ondrop="drop_handler(event);" ondragover="dragover_handler(event);"> <li draggable="true" ondragstart="dragstart_handler(event);">1</li> <li draggable="true" ondragstart="dragstart_handler(event);">2</li> <li draggable="true" ondragstart="dragstart_handler(event);">3</li> <li draggable="true" ondragstart="dragstart_handler(event);">4</li> <li draggable="true" ondragstart="dragstart_handler(event);">5</li> </ul>
js代码:
var uls = document.querySELEctor(‘ul‘); var offsetTop = uls.offsetTop; var clientX = ‘‘; var clientY = ‘‘; var n = 0; function dragstart_handler(ev) { console.log("dragStart"); ev.target.setAttribute(‘id‘,‘test1‘) ev.dataTransfer.setData("text/plain",ev.target.id); } function dragover_handler(ev) { ev.preventDefault(); clientX = ev.clientX; clientY = ev.clientY; n = Math.round((clientY - offsetTop)/52) //52代指拖拽元素的高度 } function drop_handler(ev) { console.log("Drop"); ev.preventDefault(); var data = ev.dataTransfer.getData("text"); console.log(n) var nodes = document.getElementById(data); uls.insertBefore(nodes,children(uls)[n]); nodes.removeAttribute(‘id‘); ev.dataTransfer.clearData(); } function children(nodE){ var tmp = node.childNodes; var arr = []; tmp.forEach(function(item){ if(item.nodeType == 1){ arr.push(item); } }); return arr; }
效果展示:
以上是大佬教程为你收集整理的基于html5拖拽api实现列表的拖拽排序全部内容,希望文章能够帮你解决基于html5拖拽api实现列表的拖拽排序所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。