前端开发的时候，有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人，抽点时间用js小小的实现了类似的插件，话不多说。

  1. 　first:　html和css

    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title></title>
    
    <style>
    
        * {
    
            margin: 0;
    
            padding: 0;
    
        }

        #div1 {
    
            position: absolute;
    
            width: 100px;
    
            height: 100px;
    
            cursor: move;
    
            background-color: red;
    
        }
    
    </style>
    
</head>
    
<body>
    
    <div id="div1">
    
    </div>
    
</body>
    
</html>

  2. now,先把主要算法实现一下： 
     <script>
    
        window.onload = function () {
    
            //获取需要拖拽的div
    
            var div1 = document.getElementById("div1");
    
            //添加鼠标按下事件
    
            div1.onmousedown = function (evt) {
    
                var oEvent = evt || event;
    
                //获取按下鼠标到div left  top的距离
    
                var distanceX = oEvent.clientX - div1.offsetLeft;
    
                var distanceY = oEvent.clientX - div1.offsetTop;
    
                //添加doc滑动时间
    
                document.onmousemove = function (evt) {
    
                    var oEvent = evt || event;
    
                    //重新计算div的left top值
    
                    var left = oEvent.clientX - distanceX;
    
                    var top = oEvent.clientY - distanceY;

                    //left  当小于等于零时，设置为零 防止div拖出document之外
    
                    if (left <= 0) {
    
                        left = 0;
    
                    }
    
                    //当left 超过文档右边界  设置为右边界
    
                    else if (left >= document.documentElement.clientWidth - div1.offsetWidth) {
    
                        left = document.documentElement.clientWidth - div1.offsetWidth;
    
                    }
    
                    if (top <= 0) {
    
                        top = 0;
    
                    }
    
                    else if (top >= document.documentElement.clientHeight - div1.offsetHeight) {
    
                        top = document.documentElement.clientHeight - div1.offsetHeight;
    
                    }

                    //重新给div赋值
    
                    div1.style.top = top + "px";
    
                    div1.style.left = left + "px";
    
                }
    
                //添加鼠标抬起事件
    
                div1.onmouseup = function () {
    
                    //清空事件
    
                    document.onmousemove = null;
    
                    div1.onmouseup = null;
    
                }
    
            }
    
        }

    </script>
  3. yeah,使用面向对象实现一下 
    <style>
    
        * {
    
            margin:0;
    
            padding:0;
    
        }
    
        #div1 {
    
            width: 100px;
    
            height: 100px;
    
            background-color: red;
    
        }
    
        #div2 {
    
            background-color:yellow;
    
            width:100px;
    
            height:100px;
    
        }
    
    </style>

<div id="div1"></div>
    
<div id="div2"></div>

    js Draggle class:

     function Drag(id) {
    
            this.div = document.getElementById(id);
    
            if (this.div) {
    
                this.div.style.cursor = "move";
    
                this.div.style.position = "absolute";
    
            }

            this.disX = 0;
    
            this.disY = 0;
    
            var _this = this;

            this.div.onmousedown = function (evt) {
    
                _this.getDistance(evt);

                document.onmousemove = function (evt) {
    
                    _this.setPosition(evt);
    
                }

                _this.div.onmouseup = function () {
    
                    _this.clearEvent();
    
                }
    
            }
    
        }

        Drag.prototype.getDistance = function (evt) {
    
            var oEvent = evt || event;
    
            this.disX = oEvent.clientX - this.div.offsetLeft;
    
            this.disY = oEvent.clientY - this.div.offsetTop;
    
        }

        Drag.prototype.setPosition = function (evt) {
    
            var oEvent = evt || event;
    
            var l = oEvent.clientX - this.disX;
    
            var t = oEvent.clientY - this.disY;
    
            if (l <= 0) {
    
                l = 0;
    
            }
    
            else if (l >= document.documentElement.clientWidth - this.div.offsetWidth) {
    
                l = document.documentElement.clientWidth - this.div.offsetWidth;
    
            }
    
            if (t <= 0) {
    
                t = 0;
    
            }
    
            else if (t >= document.documentElement.clientHeight - this.div.offsetHeight) {
    
                t = document.documentElement.clientHeight - this.div.offsetHeight;
    
            }
    
            this.div.style.left = l + "px";
    
            this.div.style.top = t + "px";
    
        }

        Drag.prototype.clearEvent = function () {
    
            this.div.onmouseup = null;
    
            document.onmousemove = null;
    
        }

    at last：最终实现：

      window.onload = function () {
    
            new Drag("div1");
    
            new Drag("div2");
    
        }

    效果如下:

　　入园子已经三载有余，平时也爱在各位经营的园子溜达汲取知识。之前也有过想开一个自己的园子，但总因为这样那样的事情把这事遗忘了。最近发现身边的@考拉熊http://home.cnblogs.com/u/rccc/好早已经有了这个习惯。人啊，怎么说呢，总是向比自己强的人看起！加油 ，u can @o(∩_∩)o 哈哈

js插件-简单拖拽的更多相关文章

  1. 好玩的原生js的简单拖拽

    这个拖拽的图片不是唯一的,拿到代码自己添加一张照片就可以啦 <!DOCTYPE html><html> <head> <meta charset=" ...

  2. js实现简单拖拽效果

    方法如下: var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false }; var getCss = function ...

  3. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  4. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  5. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  6. jquery插件-自由拖拽

    最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...

  7. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  8. jQuery插件（拖拽）

    拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). ...

  9. 纯JS实现可拖拽表单

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...

随机推荐

  1. CentOS6.8 安装/升级Python2.7.x，并安装最新setuptools、pip、fabric程序总结

    最终靠谱的可借鉴文档: 1.python官网 2.http://lovesoo.org/python-fabric-yuan-cheng-zi-dong-bu-shu-jian-jie.html 3. ...

  2. webpackES6语法转ES5语法

    安装babel-loader: npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 webpack.config. ...

  3. objc_setAssociatedObject 关联对象

    使用场景:在分类中,不允许创建实例变量,这里就解决了此问题 参考: https://www.cnblogs.com/someonelikeyou/p/7162613.html 属性的实质:就是实例变量 ...

  4. spring-boot的helloWorld详解

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 3.2.5 2.Maven Plugin管理 pom.xml配置代码: <project xml ...

  5. git merge 上线操作流程

    switch to branch git merge 主干到分支解决冲突,解决冲突文件,冲突文件,add to index 检查文件无<<<<<<< .=== ...

  6. C++ win32 dll 引用外部CLR，加载托管程序集异常-Error 10 error LNK2019: unresolved external symbol _CLRCreateInstancet

    异常: Error 10 error LNK2019: unresolved external symbol _CLRCreateInstance@12 referenced in function ...

  7. C语言基本数据类型大小

    C语言基本数据类型占用的字节数可以通过如下例子获取: #include<stdio.h> int main(void) { printf("char size=%d \n&quo ...

  8. python with as 以上这段代码执行完毕后，就算在处理过程中出问题了，文件 f 总是会关闭。

    with open("myfile.txt") as f: for line in f: print(line, end="") 以上这段代码执行完毕后,就算在 ...

  9. Linux操作系统(四)_部署MySQL

    一.部署过程 1.当前服务器的内核版本和发行版本 cat /etc/issue uname -a 2.检查系统有没有自带mysql,并卸载自带版本 yum list installed | grep ...

  10. 解决myeclipse validation验证javascript导致速度变慢的现象

    参考:https://jingyan.baidu.com/article/ca41422fe094251eae99ede7.html