前端开发的时候，有好多地方用到拖拽效果,当然 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. 【leetcode】668. Kth Smallest Number in Multiplication Table

    题目如下: 解题思路:几乎和[leetcode]719. Find K-th Smallest Pair Distance 的方法一样.只不过一个是减法一个是乘法,还有一点区别是[leetcode]7 ...

  2. nuget cli 打包发包

    微软官网打包说明:https://docs.microsoft.com/zh-cn/nuget/quickstart/create-and-publish-a-package-using-visual ...

  3. PHPthink 配置目录

    系统默认的配置文件目录就是应用目录(APP_PATH),也就是默认的application下面,并分为应用配置(整个应用有效)和模块配置(仅针对该模块有效). ├─application 应用目录 │ ...

  4. LDD3 第9章 与硬件通信

    一.I/O端口和I/O内存 每种外设都通过读写寄存器进行控制.大部分外设都有几个寄存器,不管是在内村地址空间还是在I/O地址空间,这些寄存器的访问地址都是连续的. 在硬件层,内存区域和I/O区域没有区 ...

  5. mysql图形化管理工具workbench下载安装以及基本使用

    1.下载安装 去mysql官网下载地址进行下载安装 2. 创建schema和表格等基本操作 (1)连接数据库 打开workbench,操作如下: ps:正常需要输入mysql的密码的,但是我之前保存了 ...

  6. PCB下元器件重叠放置--Altium Designer

    这里指的是同层元件重叠,即在大的器件下放置小的器件:虽然程序设计规则默认同层元件重叠是错误的,但是在实际设计中,同层元件重叠却经常使用. 以Altium Designer9.0为例:不过好像规则里并没 ...

  7. paper 153：Delaunay三角剖分算法--get 这个小技术吧！

    直接摘自百度百科,希望大家能根据下面的介绍稍微理顺思路,按需使用,加油! 解释一下:点集的三角剖分(Triangulation),对数值分析(比如有限元分析)以及图形学来说,都是极为重要的一项预处理技 ...

  8. LOJ 2302 「NOI2017」整数——压位线段树

    题目:https://loj.ac/problem/2302 压30位,a最多落在两个位置上,拆成两次操作. 该位置加了 a 之后,如果要进位或者借位,查询一下连续一段 0 / 1 ,修改掉,再在含有 ...

  9. vue.js循环语句

    vue.js循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组, site 是数组元素迭代的别名. v-for 可以 ...

  10. mysql 一条sql完成saveOrUpdate 存在即更新

    关键字 on duplicate key update <pre name="code" class="sql"> insert into tabl ...