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

函数式简单版：

 
    <style type="text/css">

            #div1 {

                position: absolute;

                height: 100px;

                width: 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;

                width: 100px;

                background: #ccc;

            }

            .drag_box {

                height: 100px;

                width: 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;

                width: 100px;

                background: #ccc;

            }

            .drag_box {

                height: 100px;

                width: 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，这里的问题暂时不考虑了。

JS拖拽系列--多元素拖拽，面向对象，es6拖拽的更多相关文章

  1. 拖拽系列一、JavaScript实现简单的拖拽效果

        前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...

  2. 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

    接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...

  3. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

  4. Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17718579),请尊重他人的辛勤劳动成果,谢谢! 在And ...

  5. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  6. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  7. 【功能代码】---5 JS通过事件隐藏显示元素

    JS通过事件隐藏显示元素 在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none    <div id=" ...

  8. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. 通过JS动态的修改HTML元素的样式和增添标签元素等

    一. 通过JS动态的修改HTML元素的样式   1. 要想在js中动态的修改HTML元素的样式,首先需要写document,    document我们称之为文档对象,这个对象中保存了当前网页中所有的 ...

随机推荐

  1. css彩色（渐变）文字

    css彩色文字也称渐变文字 在张鑫旭博客首页看到这效果,就自己研究了一下. 实现方法加个背景然后在根据文本剪切,再把文本填充为透明色让之前设置的背景颜色显示出来即可. -webkit-backgrou ...

  2. php curl方法 支持 http https get post cookie

    //请求方式curl封装 @author Geyaru QQ 534208139 参数1:访问的URL,参数2:post数据(不填则为GET),参数3:提交的$cookies,参数4:是否返回$coo ...

  3. 微信小程序_(map)简单的小地图

    map地图效果 官方文档:传送门 Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, lati ...

  4. 揭开HTTPS的神秘面纱

    摘自:https://www.cnblogs.com/hujingnb/p/11789728.html 揭开HTTPS的神秘面纱   在说HTTP前,一定要先介绍一下HTTP,这家伙应该不用过多说明了 ...

  5. kotlin 简单处理 回调参数 加？

    Kotlin Parameter specified as non-null is null 2017年10月18日 17:21:49 amiko_ 阅读数:9017    版权声明:本文为博主原创文 ...

  6. 关于Hibernate中Java实体类加载出现序列化异常

    晚上跟着教程敲网上商城项目的时候(ssh框架写的),碰到了一个问题,就是如题所示的序列化异常问题,这个问题纠结了很久,最后发现了一个解决方法,虽然这篇文章可能几乎不会被人访问到,但是还是要写出来! 其 ...

  7. DS博客作业08—课程总结

    1.当初你是如何做出选择计算机专业的决定的? 开始时我选择的专业就是网络/物联网,计算机专业是一个充满创造性的专业 2.对比开篇博客,哪些方面还存在哪些不足? 这个人就像戏台上的老将军,全身插满fla ...

  8. leetcode-easy-math-13 Roman to Integer

    mycode  97.21% class Solution(object): def romanToInt(self, s): """ :type s: str :rty ...

  9. gromacs2018使用踩坑记--insert-molecules

    1] gmx插入分子[ -f [<.gro / .g96 / ...>] ] [ -ci [<.gro / .g96 / ...>] ] [ -ip [<.dat> ...

  10. 使用hash方法切割文件

    如果有大型数据文件(如每行为url或者ip或者单词等的),以G为单位的,处理的时候需先切分.普通切分方法直接根据数据条数切分,得到的每个文件大小相近. 但是有时需要将相同数据放到相同文件中.可以使用h ...