转自: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. 类库探源——System.Configuration 配置信息处理

    按照MSDN描述 System.Configuration 命名空间 包含处理配置信息的类型 本篇文章主要两方面的内容 1. 如何使用ConfigurationManager 读取AppSetting ...

  2. win7音量控制图标不见了怎么办啦?

    1.打开程序管理器(ctrl+alt+delete)2.在进程那里找到"explorer.exe",然后按结束进程(此时工具栏会消失)3.然后在文件(程序管理器左上角),点击&qu ...

  3. redis基本数据类型【3】-List类型

    列表类型采用双向链表实现的,借助列表类型redis还可以作为队列使用,一个列表类型key最多能容纳2^32-1个元素 1.向列表两端增加元素 #向左边增加元素,返回增加后列表的长度 lpush key ...

  4. Python GUI with Tkinter (from youtube) 在youtube上能找到很多编程视频...

    Python GUI with Tkinter - 1 - Introduction以上链接是一个python tkinter视频系列的第一讲的链接.虽然英语不好,但是,程序还是看得懂的(照着做就可以 ...

  5. ECHO is off

    执行 batch 脚本: @ECHO OFF @ECHO @ECHO !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Alert !!!!!!!!!!!!!!!!!!!!!!! ...

  6. ASP.NET设计模式(一)、适配器模式、依赖注入依赖倒置、空对象模式

    鸟随凤鸾,人伴贤良,得以共之,我之幸也.说的是鸟随着鸾凤可以飞的更高远,人和比自己境界高的相处,自己也会得到熏染进步. 一.概述 分享出来简单的心得,望探讨 依赖倒置 依赖注入 Adapter模式 N ...

  7. JavaScript符串中每个单词的首字母大写化

    map() + replace() function titleCase(str) { var convertToArray = str.toLowerCase().split(" &quo ...

  8. tmux复制到windows剪贴板/粘贴板的坑

    以下所有操作都是在windows下面用putty连接linux centos6的情景下. 一直很纳闷为什么在tmux模式下不能把复制到的文字放到系统的粘贴板里面呢?通过层层阻碍,终于找到了原因. 去掉 ...

  9. XStream简单使用01——xml和Ojbect互转

    package org.zhb.test; /** * author : zhb * data : 2014-2-14 * use packages: * xmlpull-1.1.3.1.jar * ...

  10. 在Django中使用Mako模板

    用了一个月后,终于忍受不了Django的模板了.主要原因是模板内不能运行原生的python语句,所以用起来总感觉被人绑住手脚,遍历个字典都要搞半天. 所以决定用第三方的模板.查了一下,django用的 ...