前端开发的时候，有好多地方用到拖拽效果,当然 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. Struts和Hibernate的jar包

    这几天做了一个javaee关于struts框架和Hibernate框架的实践,实践内容倒是没什么,关键是找框架的配置花了许多时间 于是在这里把这两个框架的有关jar上传分享一下 链接: https:/ ...

  2. CTF | bugku | 秋名山车神

    ''' @Modify Time @Author ------------ ------- 2019/8/31 19:55 laoalo ''' import requests from lxml i ...

  3. jQuery积累：serialize()、stringify()、toJSON()

    *)表单serialize()序列化,和serializeArray() ##)应用场景 当Ajax或者get请求发送表单中的某一个,或者某几个值到后台时,通过jQuery就能获取到这些值.然后作为A ...

  4. linux内核，驱动，应用程三者的概念和之间的关系

    驱动程序属于内核的一个部分.准确的说是内核的一个组件.不包含驱动的内核也叫做内核,并且这也是我们常说的内核.内核要干的事情无非5件. 1,内存管理 2,虚拟文件系统 3,进程调度 4,网络接口 5,进 ...

  5. Castle动态代理拦截

    比如现在有一个方法,进行积分奖励 PointAdd 在不改变原来方法的基础上,增加积分奖励的日志 using Castle.DynamicProxy; public class AuditTraceI ...

  6. Leaflet-Leafletv0.7使用leaflet-bing-layer

    digidem/leaflet-bing-layer: Bing Maps Layer for Leaflet v1.0.0:从标题就可以看出要Leaflet v1.0.0才能用.其实leaflet ...

  7. 【VisualStdio】在VS2015中显示上下文菜单中“创建单元测试”菜单

    ---恢复内容开始--- VS2012以后创建单元测试的选项被默认隐藏了,创建单元测试变得无比低效率.看msdn的说法好像是想推荐使用Intell Test来替代单元测试的用途,但是还没摸清楚也不敢瞎 ...

  8. iview+vue 表格任一项实现鼠标划上显示内容

    在新版本的iview中,表格新增了tooltip功能: 但做项目时并不是新的iview版本,又不想升级,如何才能实现当内容过多鼠标划上显示内容?下边是我做项目时的改动: { // fixed: 'le ...

  9. 利用print函数模拟打印进度条

    import time , , ): time.sleep(0.1) num = i // 2 # 地板除,即取不大于/后的最小整数(3//2 = 1, 9//4 = 2, -7//2 = -4) s ...

  10. 【Nacos】数据一致性

    转自:https://blog.csdn.net/liyanan21/article/details/89320872 目录 一.Raft算法 二.Nacos中Raft部分源码 init() 1. 获 ...