使用jQuery实现简单的拖动效果

 转自：http://www.muzilei.com/archives/136

如何实现拖动效果？

浏览DEMO

首先分析下拖动效果原理：

1.当鼠标在被拖动对象上按下鼠标（触发onmousedown事件，且鼠标在对象上方）

2.开始移动鼠标（触发onmousemove事件）

3.移动时更显对象的top和left值

4.鼠标放开停止拖动(触发onmouseup事件)

注意：拖动的对象必须是定位对象(即设置了position:absolute或 relative)。

也就是说拖动事件=onmousedown事件+onmousemove事件

整个过程就是处理这三个事件来模拟drag事件

现在看看我实现的源代码：

html代码：

1 <div class="drag">
2   <p class="title">标题(点击标题拖动)</p>
3 </div>
4
5 <div class="drag1">
6   <p class="title">标题</p>
7   点击我移动
8 </div>

jquery插件代码：

1 (function($){
2     $.fn.drag=function(options){
3
4     //默认配置
5     var defaults = {
6         handler:false,
7         opacity:0.5
8         };
9
10        // 覆盖默认配置
11     var opts = $.extend(defaults, options);
12
13     this.each(function(){
14
15     //初始标记变量
16     var isMove=false,
17     //handler如果没有设置任何值，则默认为移动对象本身，否则为所设置的handler值
18     handler=opts.handler?$(this).find(opts.handler):$(this),
19     _this=$(this), //移动的对象
20     dx,dy;
21
22     $(document)
23     //移动鼠标，改变对象位置
24     .mousemove(function(event){
25     // console.log(isMove);
26     if(isMove){
27
28     //获得鼠标移动后位置
29     var eX=event.pageX,eY=event.pageY;
30
31     //更新对象坐标
32     _this.css({'left':eX-dx,'top':eY-dy});
33
34             }
35         })
36
37     //当放开鼠标，停止拖动
38     .mouseup(function(){
39         isMove=false;
40         _this.fadeTo('fast', 1);
41         //console.log(isMove);
42             });
43
44     handler
45     //当按下鼠标，设置标记变量isMouseDown为true
46     .mousedown(function(event){
47
48     //判断最后触发事件的对象是否是handler
49     if($(event.target).is(handler)){
50
51         isMove=true;
52         $(this).css('cursor','move');
53
54         //console.log(isMove);
55         _this.fadeTo('fast', opts.opacity);
56
57         //鼠标相对于移动对象的坐标
58         dx=event.pageX-parseInt(_this.css("left"));
59         dy=event.pageY-parseInt(_this.css("top"));
60
61             }
62                 });
63         });
64     };
65  })(jQuery);

调用方法：

1 $(function(){
2
3 //拖动标题
4 $(".drag").drag({
5     handler:$('.title'),//操作拖动的对象，此对象必须是移动对象的子元素
6     opacity:0.7 //设置拖动时透明度
7     });
8
9 //拖动主体对象
10 $(".drag1").drag({
11      opacity:0.7
12      });
13
14 });

浏览DEMO