思享工具箱

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

摘要：
最近，我不太忙。最后，我有时间研究我一直想完成的拖沓系列。首先，我写了一个面向过程的系列，然后我制作了一个基于对象的系列，接着我顺便玩了继承。最后，我上了一天多的ES6课，收获颇丰。上面的代码：函数简单版本：#div1｛position:absolute；height:100px；100px；background:#ccc；｝sdasdsdfsfsdfsdszvarlog=console。日志绑定vardiv1=文档.getElementById；拖动；面向对象+继承：#div1｛position:absolute；height:100px；100px；background:#ccc；｝。drag_Box｛height:100px；100px；background:rgb；position:absolute；｝sdasdsdfsfsdfsdszsdadas多框拖动多盒拖动dsadasdvarlog=console.log.bind；；（function（）｛window.Drag=functionDrag（cls）｛this.obj=Array.protocol.slice.call（document.querySelectorAll（cls））；this.win_w=document.dococumentElement.clientWidth||document.body.clientWidth；this.win_h=document.docdocumentElement.clientHeight | | document.body.chlientHeight；｝拖动。原型init=function（user_config）｛//默认参数vardefaults＝｛isLimit:false，isChangeIndex:false｝this。config=此。extend（默认值，user_config）；var_ this=此；for（vari=0；i＜this.obj.length；i++）{（function（i）{_this.obj[i].omousedown=function（）{this.disX；this.disY；varpos=document.defaultView.getComputedStyle（_this.oj[i]，false）.Position；if（！

最近不太忙，终于有时间，研究了一下早就想搞定的拖拽系列，先是写了面向过程式的，再做一个面向对象的，再顺便弄弄继承，最后玩一下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   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，这里的问题暂时不考虑了。


标签：#js | 浏览：199 | 发布日期：

免责声明：文章转载自《JS拖拽系列--多元素拖拽，面向对象，es6拖拽》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Main Page Openembedded.org完整uploadify批量上传文件插件使用下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

js正则匹配获取文件名

//获取文件名，不带后缀 var file_name=file_path.replace(/(.*/)*([^.]+).*/ig,"$2"); //获取文件后缀 1.var FileExt=file_path.replace(/.+./,""); 2.var fileExtension = file_path.substring(file_path.l...

js之split()和join()的用法

说明 这几天写了一个简单的vue项目，需要截取字符串，一时间想到了正则表达式，还折腾了还一会儿，最后上网查了一下，使用split()再简单不过了，也顺便回忆一下join()。可见我有多菜，哈哈，学了这么久，竟然对它们这么陌生。 split(separator，howmany) 说明：可以把某个字符串str按某个字符(separator)分割成多个字符串...

日期选择器（Query+bootstrap和js两种方式）

日期选择是在下拉列表中选择年、月、日，年显示前后的五年，12个月，日就是有30、31、29、28天的区别，随着月份的变而变 一、js方式的日期选择 （1）首先就是三个下拉列表了，点击年、月、日显示列表中的内容，这样就是要给这三个列表加“点击事件”onclick <select onclick="biantian()"></select...

JS中常用的xpath特性

//选择所有dir元素的值等于xx的元素    Dom.documentElement.selectNodes("server/dir[text()='xx']")       //选择server元素下的所有dir元素：    Dom.documentElement.selectNodes("server/dir")       //选择server元素...

JS中图片飞飞效果

当鼠标在界面上移动的时候，后面有一连串的图片跟随者一起飘动，效果如下：       实现的基本思想：准备五个img标签，为了方便控制都放在一个div里面，设置div的定位方式为 fixed，设置成这中定位方式主要是为了解决在页面出现滚动条的情况下，图片还能够跟随鼠标移动。然后再鼠标移动的时候，延时给每一个图片设置定位的left和top距离就OK了。HTM...

js中for循环

for(var i;i<0;i++){　　　　　　// i可以赋值 代码 } 多层嵌套 for(var i;i<0;i++){ for(var j;j<0;j++){ for(var j;j<0;j++){ 代码； } } }  ...

最新文章

随机推荐

思享工具箱导航