最近一直在看javascript的书籍，有些东西在书上看着貌似理解了，但是在真正动手实践时，其实有些细节你根本不了解。所以看起来就算是一个简单的效果，写起来也未必简单，就算写起来简单，写的代码也未必规范、可维护性等等。无奈，一直学习编程以来都是眼高手低，导致什么都写不出来。在自己没有足够的功底写出好的代码出来，学习大牛的代码也是一直高效的方式。以下是一个拖放的效果，参考的代码，重构以下，加以理解学习。

首先来看效果：

拖动div

拖放状态：未开始

【程序说明】

拖动原理：其实就是在拖动块上监听mousedown事件，鼠标点击时，通过事件对象获取对应的坐标参数。然后鼠标移动时再监听document上的mousemove事件，获取鼠标的clientX 和clientY坐标然后设置拖动块的left 和 top。

首先是监听mousedown事件

EventUtil.addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));

然后在Start上添加mousemove 和 mouseup 事件

//监听mousemove 和 mouseup事件

EventUtil.addEventHandler(document, "mousemove", this._fM);

EventUtil.addEventHandler(document, "mouseup", this._fS);

鼠标移动时，设置拖动块的left 和 top 属性 ：

 if(!this.LockX)this.Drag.style.left = iLeft + "px";

 if(!this.LockY)this.Drag.style.top = iTop + "px"; 

水平和垂直锁定：通过判断LockX 和lockY属性来限制对于的top 和 left 属性即可。

范围限制锁定：通过计算容器的宽高和拖动块的宽高差值来设定最大left值和top值，来限制拖动块的left值和top值会在一定的范围里。

完整DEMO：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript拖放效果</title>
    <style type="text/css">
     
    </style>
</head>
<body>
    <div id="drag-wrap" style="height: 300px;margin:10px;border:5px solid #FF8000;background:#8080C0;position: relative;">
         <div class="draggable" id="drag" style="width:100px;height: 100px;position: absolute;top: 100px;left:100px;background:#eee;border:1px solid #aceaac;cursor: move;">拖动div</div>
    </div>
    <input id="idReset" type="button" value="复位" />
    <input id="idLock" type="button" value="锁定全部" />
    <input id="idLockX" type="button" value="锁定水平" />
    <input id="idLockY" type="button" value="锁定垂直" />
    <input id="idLimit" type="button" value="范围锁定" />
    <input id="idLimitOff" type="button" value="取消范围锁定" />
    <br />拖放状态：<span id="idShow">未开始</span>
    <script type="text/javascript">
        /**
          *工具函数
          */
         var isIE = (document.all) ? true : false ;
 
         var $$ = function(id){
             return "string" == typeof id ? document.getElementById(id) : id;
         };
 
         var Class = {
            create: function() {
                return function() { this.initialize.apply(this, arguments); }
            }
        };
 
        var Extend = function(destination,source){
            for(var property in source){
                destination[property] = source[property];
            }
        };
 
        var BindAsEventListener = function(object,func){
            return function(event){
                return func.call(object,event || window.event);
            }
        };
 
        var Bind = function(object,func){
            return function(){
                return func.apply(object,arguments);
            }
        };
 
         /**
          *跨浏览器事件对象
          */
        var EventUtil = {
            //事件注册处理程序
            addEventHandler:function(oTarget,sEventType,fnHandler){
                 if(oTarget.addEventListener){
                     oTarget.addEventListener(sEventType,fnHandler,false);
                 }else if(oTarget.attachEvent){
                     oTarget.attachEvent("on"+sEventType,fnHandler);
                 }else{
                     oTarget["on"+sEventType] = fnHandler;
                 }
             },
             //事件移除处理程序
             removeEventHandler:function(oTarget,sEventType,fnHandler){
                 if(oTarget.removeEventListener){
                     oTarget.removeEventListener(sEventType,fnHandler,false);
                 }else if(oTarget.detachEvent){
                     oTarget.detachEvent("on"+sEventType,fnHandler);
                 }else{
                     oTarget["on"+sEventType] = null;
                 }
             },
             getEvent:function(event){
                 return event ? event : window.event;
             },
             getTarget:function(event){
                 return event.target || event.srcElement;
             }
        };   
 
        /**
          *拖放程序
         */
         var Drag= Class.create();
 
         Drag.prototype = {
             //初始化对象
             initialize:function(drag,options){
                 this.Drag = $$(drag);//拖放对象
                 this._x = this._y = 0;//记录鼠标相对于拖放对象的位置
                 //事件对象(用于绑定移除事件)
                 this._fM = BindAsEventListener(this, this.Move);
                this._fS = Bind(this, this.Stop);
                this.Drag.style.position = "absolute";
                this.marginLeft = this.marginTop = 0;//记录margin
                //设置参数
                this.setOptions(options);
                //获取相关参数及类型转换
                this.Limit = !!this.options.Limit;//转换为布尔型
                this.mxLeft = parseInt(this.options.mxLeft);
                this.mxRight = parseInt(this.options.mxRight);
                this.mxTop = parseInt(this.options.mxTop);
                this.mxBottom = parseInt(this.options.mxBottom);
 
                this.Lock = !!this.options.Lock;
                this.LockX = !!this.options.LockX;
                this.LockY = !!this.options.LockY;
 
                this.onStart = this.options.onStart;
                this.onMove = this.options.onMove;
                this.onStop = this.options.onStop;
 
                this._Handle = $$(this.options.Handle) || this.Drag;
                this._mxContainer = $$(this.options.mxContainer) || null;
                //监听拖动对象mousedown事件
                EventUtil.addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));
 
             },
             //准备拖动   
             Start:function(oEvent){
                 if(this.Lock){return;}//如果锁定则不执行
                 //记录mousedown触发时鼠标相对于拖放对象的位置
                 this._x = oEvent.clientX - this.Drag.offsetLeft;
                this._y = oEvent.clientY - this.Drag.offsetTop;
                //监听mousemove 和 mouseup事件
                EventUtil.addEventHandler(document, "mousemove", this._fM);
                EventUtil.addEventHandler(document, "mouseup", this._fS);
             },   
             //拖动
             Move:function(oEvent){
                 //设置移动参数
                 var iLeft = oEvent.clientX - this._x , iTop = oEvent.clientY - this._y;
                 //设置范围限制
                 if(this.Limit){
                     //设置范围参数
                    var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
                    //如果设置了容器，再修正范围参数
                    if(!!this._mxContainer){
                        mxLeft = Math.max(mxLeft, 0);
                        mxTop = Math.max(mxTop, 0);
                        mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
                        mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
                    };
                    //修正移动参数
                    iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);
                    iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);
                 }
                 //XY锁定
                 if(!this.LockX)this.Drag.style.left = iLeft + "px";
                if(!this.LockY)this.Drag.style.top = iTop + "px";
                //执行附加程序
                this.onMove();
             },
             //停止拖动
             Stop:function(){
                EventUtil.removeEventHandler(document, "mousemove", this._fM);
                EventUtil.removeEventHandler(document, "mouseup", this._fS);
                //执行附加程序
                this.onStop();
             },
             //设置默认参数
             setOptions:function(options){
                 this.options = {//默认值
                    Handle:            "",//设置触发对象（不设置则使用拖放对象）
                    Limit:            false,//是否设置范围限制(为true时下面参数有用,可以是负数)
                    mxLeft:            0,//左边限制
                    mxRight:        9999,//右边限制
                    mxTop:            0,//上边限制
                    mxBottom:        9999,//下边限制
                    mxContainer:    "",//指定限制在容器内
                    LockX:            false,//是否锁定水平方向拖放
                    LockY:            false,//是否锁定垂直方向拖放
                    Lock:            false,//是否锁定
                    Transparent:    false,//是否透明
                    onStart:        function(){},//开始移动时执行
                    onMove:            function(){},//移动时执行
                    onStop:            function(){}//结束移动时执行
                };
                Extend(this.options, options || {});
             }
         };
 
        //初始化拖动对象
        var drag = new Drag('drag',{mxContainer:'drag-wrap',Limit:true,
                onStart: function(){ $$("idShow").innerHTML = "开始拖放"; },
                onMove: function(){ $$("idShow").innerHTML = "left："+this.Drag.offsetLeft+"；top:"+this.Drag.offsetTop; },
                onStop: function(){ $$("idShow").innerHTML = "结束拖放"; }
                });
        $$("idReset").onclick = function(){
            drag.Limit = true;
            drag.mxLeft = drag.mxTop = 0;
            drag.mxRight = drag.mxBottom = 9999;
            drag.LockX = drag.LockY = drag.Lock = false;
            $$("idShow").innerHTML = "复位";
        }
        $$("idLock").onclick = function(){ drag.Lock = true;$$("idShow").innerHTML = "锁定全部";}
        $$("idLockX").onclick = function(){ drag.LockX = true; $$("idShow").innerHTML = "锁定水平";}
        $$("idLockY").onclick = function(){ drag.LockY = true; $$("idShow").innerHTML = "锁定垂直";}
        $$("idLimit").onclick = function(){     drag.mxRight = drag.mxBottom = 200;drag.Limit = true;$$("idShow").innerHTML = "范围锁定"; }
        $$("idLimitOff").onclick = function(){ drag.Limit = false; $$("idShow").innerHTML = "取消范围锁定";}
    </script>
</body>
</html>

javascript 拖放效果的更多相关文章

  1. JavaScript实现拖放效果

    JavaScript实现拖放效果 笔者实现该效果也是套用别人的轮子的.传送门 然后厚颜无耻的贴别人的readme~,笔者为了方便查阅就直接贴了,有不想移步的可以看这篇.不过还是最好请到原作者的GitH ...

  2. Sortable – 简单灵活的 JavaScript 拖放排序插件

    当需要在网站中添加拖放排序功能的时候,jQuery UI 的排序组件可能是最流行的解决方案.今天给大家介绍另一款简单灵活的 JavaScript 拖放排序插件——Sortable,它使用 HTML5 ...

  3. 自学HTML5第三节（拖放效果）

    今天来看看网页上的拖放效果,首先来看看什么是拖放———— 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 Inte ...

  4. Javascript动画效果（三）

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  5. Javascript动画效果（一）

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  6. Javascript动画效果（二）

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  7. Javascript动画效果（四）

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  8. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  9. javascript动画效果之透明度(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

随机推荐

  1. mongo数据库时间存储的问题

    题记:项目中要加的内容,可以实现对设备的预定,被某个用户预定后的设备就不能再被其他用户所使用了,用户预定的时候就需要输入预定时间,web前端用到了boostrap的date的一个插件,非常好用,接下来 ...

  2. sw代码问题

    1.环境版本问题,myeclipse 配 jdk1.7  不能用jdk1.8 :jdk1.6满足不了代码本身 报错为:The type java.io.ObjectInputStream cannot ...

  3. 【01背包】HDU 2602 Bone Collector （模板题）

    Problem Description Many years ago , in Teddy's hometown there was a man who was called "Bone C ...

  4. dev gridcontrol 绑定int型及日期型的列默认当值为0时显示空白及格式化日期显示方式

    xmlns:sys="clr-namespace:System;assembly=mscorlib" 如只显示日期的时间部分 <dxg:GridColumn Header=& ...

  5. eclipse里xml提示包名的插件——Rinzo

    1.Rinzo简介 在官方网站上的介绍到,Rinzo是一款Eclipse的XML编辑器,可以使在处理XML文件时变得简洁高效.与一般的XML文件相比,具有以下特点: l 自动显示DTD或Schema里 ...

  6. winServer2008添加IIS服务

    右键我的电脑,选择管理,打开服务器管理器 点击左边菜单栏角色调出角色窗口 接着点击添加角色,弹出添加角色向导 点击下一步进入服务器角色选项 勾选Web服务器(IIS),点击下一步 出现 点击下一步,出 ...

  7. HDU 1272 小希的迷宫(乱搞||并查集)

    小希的迷宫 Problem Description 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有 ...

  8. 让innerHTML获取的内容包含input和select(option)的最新值

    function refreshData(){ var allInputObject=document.body.getElementsByTagName("input"); fo ...

  9. const 修饰成员函数体

    经过const修饰的变量表示不能被修改这个容易理解,例如 const int kInt = 0; // kInt 不能再被赋予其他值 const int getValue(const char *ke ...

  10. pack://application:,,,/

    FrameworkElementFactory gridFactory = new FrameworkElementFactory(typeof(Grid)); gridFactory.SetValu ...