前端开发的时候，有好多地方用到拖拽效果,当然 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. vue Echarts自适应浏览器窗口大小

    <template> <div class="chinaecharts"> <div id="mapChart" ref=&quo ...

  2. SQL server 2008 数据库优化常用脚本

    --查询某个数据库的连接数 select count(*) from Master.dbo.SysProcesses where dbid=db_id() --前名其他等待类型 * from sys. ...

  3. ckeditor实现WORD粘贴图片自动上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  4. 如何在浏览器上安装 VueDevtools工具

    火狐浏览器直接打开附加组件中,搜索 VueDevtools,找到安装即可. 谷歌浏览器--更多工具--扩展程序--打开下载好的VueDevtools整体拖进去就行了

  5. AT2070 Card Game for Three(组合数学)

    传送门 解题思路 前面的思路还是很好想的,就是要枚举最后一个\(a\)在哪出现算贡献,之后我先想的容斥,结果彻底偏了..后来调了很久发现自己傻逼了,似乎不能容斥,终于走上正轨23333.首先可以写出一 ...

  6. rabbitmqctl常用命令-3

    1)启动.关闭 rabbitmq节点和应用 rabbitmq-server -detached #rabbitmq分别启动节点和应用 应用关闭rabbitmqctl stop_app 应用启动 rab ...

  7. Autoresize UIView to fit subviews

    @interface UIView (resizeToFit) -(void)resizeToFitSubviews; -(void)resizeHightToFitSubviews; -(void) ...

  8. ASP.NET开发知识总结

    1.统一异常处理 某商城采用的异常处理方式,是全局统一捕捉,统一处理 思路: 一.定义异常过滤器    实现 MyExceptionFilter : FilterAttribute,IExceptio ...

  9. 数据结构C语言实现

    顺序表实现 typedef int Position; typedef struct LNode *List; struct LNode { ElementType Data[MAXSIZE]; Po ...

  10. python 使用[[v]*n]*m遇到的问题

    需求:想通过python生成m行n列的矩阵 方式1:(有问题) data = [[0]*3]*4 #4行3列 data 输出 [[0, 0, 0], [0, 0, 0], [0, 0, 0], [0, ...