自定义表格拖拽

前段时间做的项目是一个老项目，前后端不分离的，而且技术也是非常旧，由于不想过多引入第三方的插件，就自定义了一些方法，其中就有这个表格拖拽的方法。废话不多说，上代码。

/**
 * 表格拖动操作
 */
/**
 * 拖动设置
 * @param { id:"boxId", dragDrop:"拖动释放的回调", action:"up/down默认的拖动添加方式，可以不填写" } option 
 * @param { drag-item:"拖动的item" }
 */
function SetDragBox(option){
    if(!option){
        throw "拖动选项没有设置";
    }
    if(!option.id){
        throw "拖动的容器id没有设置";
    }
    this.id = option.id;
    this.action = option.action;
    this.box = document.getElementById(this.id);
    this.items = this.box.getElementsByClassName("drag-item");
    this.dragDrop = option.dragDrop;
    this.init();
}

SetDragBox.prototype.init = function(){
    this.addListener();
}

SetDragBox.prototype.addListener = function(){
    var that = this;
    function addListen(type, cb){
        for(var i = 0;i < that.items.length;i++){
            that.items[i].addEventListener(type, cb);
        }
    }

    // 开始拖动的时候触发的事件监听
    addListen('dragstart', function(e){
        var _this = e.target;
        that.dragTarget = _this;
        var event = e.dataTransfer ? e : e.originalEvent && e.originalEvent.dataTransfer ? e.originalEvent : window.event;
        event.dataTransfer.setData("Text", "store");
    })

    addListen('drag', function(e){

    })

    // 拖动过程中触发的事件监听
    addListen('dragover', function(e){
        e.preventDefault();
    })

    // 释放的触发的事件监听
    addListen('drop', function(e){
        var _this = e.target;
        e.preventDefault();
        if(!/drag-item/.test(_this.className)){
            var flag = true;
            while (flag) {
                _this = _this.parentNode;
                if(/drag-item/.test(_this.className)){
                    flag = false;
                }
                if(_this.tagName.toUpperCase == "BODY"){
                    flag = false;
                }
            }
        }
        if(_this.tagName.toUpperCase == "BODY"){
            throw new Error('the className of this parents is not matched drag-item');
        }
        /**
         * 根据拖动元素和目标元素在文档中的位置来进行判断放置的插入位置
         * compareDocumentPosition
         */
        var compare = _this.compareDocumentPosition(that.dragTarget);
        action = that.action ? that.action : compare == 2 ? 'down' : 'up';
        if(action == "up"){
            _this.parentNode.insertBefore(that.dragTarget, _this);
        }else{
            _this.parentNode.insertBefore(that.dragTarget, _this.nextSibling);
        }
        if(that.dragDrop){
            that.dragDrop();
        }
    })
}

这是用的es5的构造函数进行封装的方法，使用起来也比较方便。举个栗子：

    
    
    
    
    
    


    

        

            

                

                    
item1
                    
item2
                    
item3
                    
item4
                
            
            

                
item01
item12
item13
item14
                
item02
item12
item13
item14
                
item03
item12
item13
item14
                
item04
item12
item13
item14
                
item05
item12
item13
item14
                
item06
item12
item13
item14
                
item07
item12
item13
item14
                
item08
item12
item13
item14
                
item09
item12
item13
item14
                
item10
item12
item13
item14
            
        
    

栗子中最简单的时候只需要设定容器的id，容器内部需要拖拽的DOM需要加上class=drag-item这个类，还有别忘记了介个draggable=true。

另外的几个设置项构造函数中写的都有的，大家有兴趣可以试一下，自己扩展一下也是阔以的。