转自: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

使用jQuery实现简单的拖动效果的更多相关文章

  1. 使用jquery实现简单的拖动效果,分享源码

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkEAAAERCAIAAADzAOSQAAALRklEQVR4nO3dW5LaaAKEUfa/NkfMGu

  2. jquery 最简单的动画效果

    <p style="border: 1px solid red"> 我会慢慢变大 </p> <a>dianji</a> <sc ...

  3. jquery简单的拖动效果

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  4. jquery 超简单的点赞效果

    1.HTML(可以优化一下,尽量少些几个标签.....) <div id="dianz"> <b class="cz"><em&g ...

  5. js:简单的拖动效果

    效果演示:https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/ html: <div class="wrap"> &l ...

  6. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  7. JQuery(二)——简单动画效果

    上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...

  8. Jquery简单的placeholder效果

    Jquery简单的placeholder效果 由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考! 先看看效果吧!如下JSFiddle地址 ...

  9. 一行代码轻松实现拖动效果[JQuery]

    写JS实现拖动需要一大堆不便维护的代码,实属麻烦,Google了大半天,发现了一个优秀的Jquery插件EasyDrag,只需要一行代码便可轻松在主流浏览器上 实现拖动效果.   $(document ...

随机推荐

  1. 记一次ios使用OAuth 2.0写的接口获取token的小错

    1.用ios原生网络请求的话,请求参数不能这样传 而要这样传 2.用afnetworking的话,要注意各个参数有没有错误,参数可以直接这样传

  2. Mac 下显示隐藏文件

    将下面的命令粘贴进终端,按提示操作即可(可能需要输入电脑密码) 显示:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏:d ...

  3. jquery 文本框失去焦点显示提示信息&&单击置空文本框

    1.<textarea rows="4" placeholder="请输入提醒内容"></textarea> 2. /** * @par ...

  4. windows 环境下安装plpython语言环境到postgresql数据库

    1.1       安装plpython 在windows环境 1.1.1      下载http://legacy.python.org/ftp//python/3.2.5/python-3.2.5 ...

  5. 在ecshop商品详情页显示供货商

    好久没写文章了,隐约记得前几天有人问到这个问题:[如何在ecshop商品详情页面显示该商品的供货商?] 今天有时间整理下,分享给大家. 注:以下修改适用于ecshop2.7.2,其他版本未做测试. 1 ...

  6. whoosh使用笔记

    1. whoosh安装 pip install Whoosh 2. 添加索引 第一步:生成schema 第二步:根据schema生成index.index就是一个目录中的一堆文件  (针对某个目录,调 ...

  7. eclipse中DDMS的LOGcat只有一列level

    拷贝来源:http://www.cnblogs.com/kobe8/p/4620785.html http://stackoverflow.com/questions/25010393/eclipse ...

  8. hdu10007

    题意,很简单,给n个点的坐标,求距离最近的一对点之间距离的一半. 第一行是一个数n表示有n个点,接下来n行是n个点的x坐标和y坐标.实数. 这个题目其实就是求最近点对的距离   #include< ...

  9. STM32下载方法

    一.JLINK下载方法 1.硬件设置 Boot0,Boot1 = 0,*(测试通过) Boot0,Boot1 = 1,0或者0,1(未测试) 2.软件设置 MDK设置 ① 选择Project -> ...

  10. bss段为什么需要初始化?

    我们都知道bss段需要初始化,但是这是为什么呢? 通过浏览资料,我们都会发现,bss段是不会出现在程序下载文件(*.bin *.hex)中的,因为全都是0.如果把它们出现在程序下载文件中,会增加程序下 ...