基于html5拖拽api实现列表的拖拽排序

发布时间:2021-04-29 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了基于html5拖拽api实现列表的拖拽排序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

基于html5拖拽api实现列表的拖拽排序

html代码:

<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实现列表的拖拽排序全部内容,希望文章能够帮你解决基于html5拖拽api实现列表的拖拽排序所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。