通过拖动来变换元素顺序

    // 拖动变换顺序
    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 - 在一个拖动过程中，释放鼠标键时触发此事件