通过拖动来变换元素顺序 

 1     // 拖动变换顺序
 2     var moveItem=document.getElementsByClassName('layui-timeline-item');
 3     dragElement=null;
 4     for(var i=0;i<moveItem.length;i++){
 5         moveItem[i].addEventListener('dragstart',function (evt) {
 6             dragElement=this;
 7         },false);
 8         moveItem[i].addEventListener('dragenter',function (evt) {
 9 
10             if(dragElement != this){
11                 this.parentNode.insertBefore(dragElement,this);
12             }
13         },false);
14         moveItem[i].addEventListener('dragleave',function (evt) {
15             var lists=$('.layui-timeline-item');
16             for(var j=0;j<lists.length;j++){
17                 lists.eq(j).j=j;
18                 var list=lists.eq(j).prevAll().length;
19                 $('.layui-timeline-item').eq(j).find('span:eq(0)').text(list+1);
20             }
21             if(dragElement != this){
22                 if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){
23                     this.parentNode.appendChild(dragElement);
24                 }
25             }
26         },false)
27     };
28     document.ondragover = function(e){e.preventDefault();}
29     document.ondrop = function(e){e.preventDefault();}

 

 1 在拖放的过程中会触发以下事件：
 2 
 3 在拖动目标上触发事件 (源元素):
 4 ondragstart - 用户开始拖动元素时触发
 5 ondrag - 元素正在拖动时触发
 6 ondragend - 用户完成元素拖动后触发
 7 
 8 释放目标时触发的事件:
 9 ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
10 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
11 ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
12 ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

 

posted @ 2018-05-10 17:27  前端极客  阅读(2273)  评论(0)  编辑  收藏  举报