前端开发的时候，有好多地方用到拖拽效果,当然 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-Cli 安装使用 moment.js

    1.npm install moment -- save 2.main.js 引入moment //定义全局 时间过滤器 S import Moment from 'moment'; Vue.filt ...

  2. VMware安装MAC OS

    测试环境 安装环境:win10 .VMware Workstation Pro14 镜像:OS X 10.11.5(由于太大,就没有上传网盘,网上也有很多资源) 安装准备 安装前先把关于VMware的 ...

  3. html中ul，ol和li的区别

    ul是无序列表,全称是unordered list,先来个例子:    ●张三    ●李四    ●王二    ●刘五   ol是有序列表 ,全称是ordered list,同样举个例子:  1.张 ...

  4. 2018-2019-2 20175120 实验四《Android程序设计》实验报告

    任务一:Android Studio的安装测试 任务要求:参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd)>第二十四章: 参考 ...

  5. 114、TensorFlow设备放置

    # creates a variable named v and places it on the second GPU device import tensorflow as tf #with tf ...

  6. smartGit的使用

    合理管理自己的代码,对程序员来说是一件很重要的事,今天我也走上了github托管之路 要在Git上托管代码,首先你要要github官网创建一个代码仓库,用来放你的代码. 一,要托管到github,那你 ...

  7. 使用Xftp连接Centos 6.6服务器详细图文教程

    这篇文章主要介绍了使用Xftp连接Centos 6.6服务器详细图文教程,本文用详细的图文说明讲解了连接服务器和操作服务器的步骤,适合新手,需要的朋友可以参考下 一,打开Xftp软件(下载地址:Xma ...

  8. chromedriver安装报错

     解决方法:   可以使用 npm init -f命令生成package.json,package.json中缺少的字段可以参照模板 package.json进行填充,package.json中的字段 ...

  9. Linux（Ubuntu）常用命令（五）—— vi/vim常用操作

    vi/vim常用命令 vim其实就是vi的升级版,vi里的所有命令vim里都可以用,一般使用来说几乎没什么差别. 注:本篇文章区分大小写! vi / vim三级模式的关系: 命令行模式 任何时候,不管 ...

  10. Selenium：多表单(frame/iframe)切换（Switch模块）

    frame标签有frameset.frame.iframe三种,frameset跟其他普通标签没有区别,不会影响到正常的定位,而frame与iframe需要切换进去才能定位到其中的元素 比如下面这个网 ...