JS拖拽系列--多元素拖拽，面向对象，es6拖拽

最近不太忙，终于有时间，研究了一下早就想搞定的拖拽系列，先是写了面向过程式的，再做一个面向对象的，再顺便弄弄继承，最后玩一下ES6的class  不觉用了一天多，收获很大。拖拽弄完，想再弄一个拖放。 上代码：

函数式简单版：

    <style type="text/css">
            #div1 {
                position: absolute;
                height: 100px;
                 100px;
                background: #ccc;
            }
        </style>

        <div id="div1">

            sdasd
        </div>

        <p>sdfsfsdfsdfsz</p>

        <script>
            var log = console.log.bind(this);

            ;(function(win, doc) {

                var drag = function(obj, options, callback) {

                    obj.onmousedown = function(ev) {

                        var oEvent = ev || window.event;
                        var disX = oEvent.offsetX;
                        var disY = oEvent.offsetY;

                        doc.onmousemove = function(ev) {

                            var oEvent = ev || window.event;

                            var x = oEvent.clientX - disX;
                            var y = oEvent.clientY - disY;

                            obj.style.left = x + 'px';

                            obj.style.top = y + 'px';

                        }

                        doc.onmouseup = function() {
                            doc.onmousedown = null;
                            doc.onmousemove = null;
                            obj.releaseCapture && obj.releaseCapture();
                        }

                        obj.setCapture && obj.setCapture();
                        return false;

                    }

                };

                win.drag = drag;

            })(window, document);

            var div1 = document.getElementById('div1');

            drag(div1);
        </script>

面向对象+继承:

        <style type="text/css">
            #div1 {
                position: absolute;
                height: 100px;
                 100px;
                background: #ccc;
            }
            
            .drag_box {
                height: 100px;
                 100px;
                background: rgb(254, 171, 121);
                position: absolute;
            }
        </style>
        <div id="div1">
            sdasd
        </div>

        <p>sdfsfsdfsdfsz
            <br /> sdadas

        </p>

        <div class="drag_box">
            多box拖拽

        </div>

        <div class="drag_box">
            多box拖拽

        </div>

        <a href="javascript:;">dsadasd</a>

        <script>
            var log = console.log.bind(this);

            ;
            (function() {

                window.Drag = function Drag(cls) {

                    this.obj = Array.prototype.slice.call(document.querySelectorAll(cls));

                    this.win_w = document.documentElement.clientWidth || document.body.clientWidth;
                    this.win_h = document.documentElement.clientHeight || document.body.clientHeight;

                }

                Drag.prototype.init = function(user_config) {
                    //默认参数
                    var defaults = {
                        isLimit: false,
                        isChangeIndex: false

                    }

                    this.config = this.extend(defaults, user_config);

                    var _this = this;
                    for(var i = 0; i < this.obj.length; i++) {

                        (function(i) {
                            _this.obj[i].onmousedown = function() {
                                this.disX;
                                this.disY;
                                var pos = document.defaultView.getComputedStyle(_this.obj[i], false).Position;

                                if(!pos || pos.toLowerCase() == 'static') {

                                    _this.obj[i].style.position = 'absolute'
                                };
                                var e = e || window.event;
                                _this.mousedown(_this.obj[i], e);
                                return false

                            }

                        })(i);

                    }
                }

                Drag.prototype.extend = function(a, b) {

                    for(var key in b) {
                        if(b.hasOwnProperty(key)) {
                            a[key] = b[key];
                        }
                    }
                    return a;

                }

                Drag.prototype.mousedown = function(ele, e) {
                    var _this = this;

                    var e = e || window.event;
                    this.disX = e.offsetX;
                    this.disY = e.offsetY;
                    if(this.config.isChangeIndex) {

                        for(var i = 0; i < this.obj.length; i++) {

                            this.obj[i].style.zIndex = 'auto'

                        }

                        ele.style.zIndex = 100;
                    }

                    document.onmousemove = function(e) {
                        var e = e || window.event;
                        _this.mousemove(ele, e);

                    }

                    document.onmouseup = function(e) {

                        var e = e || window.event;

                        _this.mouseup(ele, e)

                    }

                }

                Drag.prototype.mousemove = function(ele, e) {
                    var l = e.clientX - this.disX;
                    var t = e.clientY - this.disY;
                    if(this.config.isLimit) {

                        var w = this.win_w - ele.offsetWidth;
                        var h = this.win_h - ele.offsetHeight;

                        ele.style.left = l <= 0 ? 0 : (l > w ? (w + 'px') : (l + 'px'));

                        ele.style.top = t <= 0 ? 0 : (t >= h ? (h + 'px') : (t + 'px'));

                    } else {

                        ele.style.left = l + 'px';
                        ele.style.top = t + 'px';

                    }

                }

                Drag.prototype.mouseup = function(ele, e) {

                    document.onmousedown = null;
                    document.onmousemove = null;
                    document.onmouseup = null;
                    if(this.config.isChangeIndex) {
                        ele.style.zIndex = 100;
                    }

                    return false

                };

            })();

            //继承出LimitDrag
            ;
            (function() {

                // 限制范围拖拽

                window.LimitDrag = function LimitDrag(cls) {

                    Drag.call(this, cls)

                }

                LimitDrag.prototype = new Drag();

                LimitDrag.prototype.constructor = LimitDrag;

                //限制范围
                LimitDrag.prototype.mousemove = function(ele, e) {

                    var l = e.clientX - this.disX;
                    var t = e.clientY - this.disY;
                    var w = this.win_w - ele.offsetWidth;
                    var h = this.win_h - ele.offsetHeight;

                    ele.style.left = l <= 0 ? 0 : (l > w ? (w + 'px') : (l + 'px'));

                    ele.style.top = t <= 0 ? 0 : (t >= h ? (h + 'px') : (t + 'px'));

                    ele.style.zIndex = 100;

                }
            })();

            window.onload = function() {

                new Drag('#div1').init({

                });

                new Drag('a').init({

                });

                new Drag('.drag_box').init({

                    isLimit: true,
                    isChangeIndex: true
                });

                new LimitDrag('p').init({

                    isLimit: true,
                    isChangeIndex: true
                });
            }
        </script>

面向对象ES6：

        <style type="text/css">
            #div1 {
                position: absolute;
                height: 100px;
                 100px;
                background: #ccc;
            }
            
            .drag_box {
                height: 100px;
                 100px;
                background: rgb(254, 171, 121);
                position: absolute;
            }
        </style>
        <div id="div1">
            sdasd
        </div>

        <p>sdfsfsdfsdfsz
            <br /> sdadas

        </p>

        <div class="drag_box">
            多box拖拽

        </div>

        <div class="drag_box" style="left: 300px;">
            多box拖拽

        </div>

        <script>
            var log = console.log.bind(this);

            // es6  class 

            class Drag {

                constructor(cls) {

                    this.obj = document.querySelectorAll(cls);
                    this.win_w = document.documentElement.clientWidth || document.body.clientWidth;
                    this.win_h = document.documentElement.clientHeight || document.body.clientHeight;

                }

                init(user_config) {

                    var defaults = {

                        isLimit: false,
                        isChangeIndex: false
                    }

                    this.config = this.extend(defaults, user_config);

                    for(let i = 0; i < this.obj.length; i++) {
                        this.disX;
                        this.disY;

                        this.obj[i].onmousedown = (e => {
                            var e = e || window.event;
                            this.mousedown(e, this.obj[i]);
                        })
                    }
                }

                extend(a, b) {

                    for(let attr in b) {

                        if(b.hasOwnProperty(attr)) {

                            a[attr] = b[attr]

                        }

                    }

                    return a;

                }

                mousedown(e, ele) {

                    this.disX = e.offsetX;
                    this.disY = e.offsetY;
                    var _this = this;

                    var pos = document.defaultView.getComputedStyle(ele, false).Position;

                    if(!pos || pos.toLowerCase() == 'static') {

                        ele.style.position = 'absolute'
                    };

                    if(this.config.isChangeIndex) {

                        for(let i = 0; i < this.obj.length; i++) {

                            this.obj[i].style.zIndex = 'auto'

                        }

                        ele.style.zIndex = 100;
                    }

                    document.onmousemove = function(e) {
                        var e = e || window.event;
                        _this.mousemove(e, ele);
                        return false
                    }

                    document.onmouseup = function() {

                        _this.mouseup(ele)
                    }

                }

                mousemove(e, ele) {
                    let l = e.clientX - this.disX;
                    let t = e.clientY - this.disY;
                    if(this.config.isLimit) {

                        let w = this.win_w - ele.offsetWidth;
                        let h = this.win_h - ele.offsetHeight;

                        ele.style.left = l <= 0 ? 0 : (l > w ? (w + 'px') : (l + 'px'));

                        ele.style.top = t <= 0 ? 0 : (t >= h ? (h + 'px') : (t + 'px'));

                    } else {

                        ele.style.left = l + 'px';
                        ele.style.top = t + 'px';

                    }

                    return false;

                }

                mouseup(ele) {
                    document.onmousedown = null;
                    document.onmousemove = null;
                    document.onmouseup = null;
                    if(this.config.isChangeIndex) {
                        ele.style.zIndex = 100;
                    }
                    return false;
                }

            }

            class chixingDrag extends Drag {

                constructor(...arg) {

                    super(...arg)
                }

                mousemove(e, ele) {

                    let l = e.clientX - this.disX;
                    let t = e.clientY - this.disY;

                    if(this.config.isLimit) {

                        let w = this.win_w - ele.offsetWidth;
                        let h = this.win_h - ele.offsetHeight;

                        ele.style.left = l <= 50 ? 0 : (l > (w - 50) ? (w + 'px') : (l + 'px'));

                        ele.style.top = t <= 50 ? 0 : (t >= (h - 50) ? (h + 'px') : (t + 'px'));

                    } else {

                        ele.style.left = l + 'px';
                        ele.style.top = t + 'px';

                    }

                    return false;

                }

            }

            window.onload = function() {

                var drag1 = new Drag('#div1').init({

                    isLimit: true
                });

                new chixingDrag('.drag_box').init({

                    isLimit: true,
                    isChangeIndex: true
                });

            }
        </script>

参数说明：

   isLimit: true,//是否限制范围，默认false

   isChangeIndex: true //是否改变z-index，默认false，也就是多文件拖拽的时候是否新挪动的在最上边。

tips:关于setCapture,releaseCapture不是很懂，说了为了兼容IE，这里的问题暂时不考虑了。