通過拖動來變換元素順序

    // 拖動變換順序
    var moveItem=document.getElementsByClassName('layui-timeline-item');
    dragElement=null;
    for(var i=0;i<moveItem.length;i++){
        moveItem[i].addEventListener('dragstart',function (evt) {
            dragElement=this;
        },false);
        moveItem[i].addEventListener('dragenter',function (evt) {

            if(dragElement != this){
                this.parentNode.insertBefore(dragElement,this);
            }
        },false);
        moveItem[i].addEventListener('dragleave',function (evt) {
            var lists=$('.layui-timeline-item');
            for(var j=0;j<lists.length;j++){
                lists.eq(j).j=j;
                var list=lists.eq(j).prevAll().length;
                $('.layui-timeline-item').eq(j).find('span:eq(0)').text(list+1);
            }
            if(dragElement != this){
                if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){
                    this.parentNode.appendChild(dragElement);
                }
            }
        },false)
    };
    document.ondragover = function(e){e.preventDefault();}
    document.ondrop = function(e){e.preventDefault();}

 

在拖放的過程中會觸發以下事件：

在拖動目標上觸發事件 (源元素):
ondragstart - 用戶開始拖動元素時觸發
ondrag - 元素正在拖動時觸發
ondragend - 用戶完成元素拖動后觸發

釋放目標時觸發的事件:
ondragenter - 當被鼠標拖動的對象進入其容器范圍內時觸發此事件
ondragover - 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件
ondragleave - 當被鼠標拖動的對象離開其容器范圍內時觸發此事件
ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件