自定义表格拖拽(封装函数)_复数拖拽有bug

网上看到的,封装得挺好的es5代码。

/**
 * 表格拖动操作
 */
/**
 * 拖动设置
 * @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();
        }
    })
}

使用:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>

    <body>
        <div>
            <table>
                <thead>
                    <tr>
                        <th>item1</th>
                        <th>item2</th>
                        <th>item3</th>
                        <th>item4</th>
                    </tr>
                </thead>
                <tbody id="dragBox">
                    <tr draggable="true" class="drag-item">
                        <td>item01</td>
                        <td>item12</td>
                        <td>item13</td>
                        <td>item14</td>
                    </tr>
                    <tr draggable="true" class="drag-item">
                        <td>item02</td>
                        <td>item12</td>
                        <td>item13</td>
                        <td>item14</td>
                    </tr>
                    <tr draggable="true" class="drag-item">
                        <td>item03</td>
                        <td>item12</td>
                        <td>item13</td>
                        <td>item14</td>
                    </tr>
                    <tr draggable="true" class="drag-item">
                        <td>item04</td>
                        <td>item12</td>
                        <td>item13</td>
                        <td>item14</td>
                    </tr>
                    <tr draggable="true" class="drag-item">
                        <td>item05</td>
                        <td>item12</td>
                        <td>item13</td>
                        <td>item14</td>
                    </tr>
                    <tr draggable="true" class="drag-item">
                        <td>item06</td>
                        <td>item12</td>
                        <td>item13</td>
                        <td>item14</td>
                    </tr>
                    <tr draggable="true" class="drag-item">
                        <td>item07</td>
                        <td>item12</td>
                        <td>item13</td>
                        <td>item14</td>
                    </tr>
                    <tr draggable="true" class="drag-item">
                        <td>item08</td>
                        <td>item12</td>
                        <td>item13</td>
                        <td>item14</td>
                    </tr>
                    <tr draggable="true" class="drag-item">
                        <td>item09</td>
                        <td>item12</td>
                        <td>item13</td>
                        <td>item14</td>
                    </tr>
                    <tr draggable="true" class="drag-item">
                        <td>item10</td>
                        <td>item12</td>
                        <td>item13</td>
                        <td>item14</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

    <script>
        /**
     * 表格拖动操作
     */
        /**
         * 拖动设置
         * @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();
                }
            })
        }
    </script>
    <script>
        new SetDragBox({
            id: 'dragBox',
            dragDrop: function () {
                console.log("drop");
            }
        });
    </script>

</html>

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Scroll to Top