鼠标拖拽事件是web中使用频率极高的事件，之前写过的代码包括网上的代码，总存在各种各样的问题，包括拖拽体验差，松开鼠标后拖拽效果仍存在以及代码冗余过大等

本次我才用jQuery实现一个尽可能高效的拖拽效果，代码中有细节上的解释，就不多说了，代码很简洁

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="utf-8" />

            <title></title>

            <script src="JavaScript/jquery-1.8.0.min.js"></script>

            <style type="text/css">

                *{

                    margin:0;

                    padding: 0;

                }

                #pic{

                    width: 80px;

                    height: 80px;

                    position: absolute;

                    left: 0;

                    right: 0;  

                }

                a{

                    border: 1px solid red;

                }

            </style>

        </head>  

        <body>

            <div id="pic">

                <img src="img/bagua.gif" width="80px"/>拖动我试试

            </div>

            <script type="text/javascript">

                var drag=function(obj){  

                    obj.bind("mousedown",start);  

                    function start(event){

                        if(event.button==0){//判断是否点击鼠标左键

                            /*

                             * clientX和clientY代表鼠标当前的横纵坐标

                             * offset()该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

                             * bind()绑定事件，同样unbind解绑定，此效果的实现最后必须要解绑定，否则鼠标松开后拖拽效果依然存在

                             * getX获取当前鼠标横坐标和对象离屏幕左侧距离之差（也就是left）值，

                             * getY和getX同样道理，这两个差值就是鼠标相对于对象的定位，因为拖拽后鼠标和拖拽对象的相对位置是不变的

                             */

                            gapX=event.clientX-obj.offset().left;

                            gapY=event.clientY-obj.offset().top;

                            //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的

                            $(document).bind("mousemove",move);

                            //此处的$(document)可以改为obj

                            $(document).bind("mouseup",stop);  

                        }

                        return false;//阻止默认事件或冒泡

                    }

                    function move(event){

                        obj.css({

                            "left":(event.clientX-gapX)+"px",

                            "top":(event.clientY-gapY)+"px"

                        });

                        return false;//阻止默认事件或冒泡

                    }

                    function stop(){

                        //解绑定，这一步很必要，前面有解释

                        $(document).unbind("mousemove",move);

                        $(document).unbind("mouseup",stop);  

                    }

                }

                obj=$("#pic");

                drag(obj);//传入的必须是jQuery对象，否则不能调用jQuery的自定义函数

            </script>

        </body>

    </html>

本文转载自：http://blog.csdn.net/u013344815/article/details/72598890

完美实现鼠标拖拽事件，解决各种小bug，基于jquery的更多相关文章

  1. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  2. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  3. HTML5深入学习之鼠标跟随，拖拽事件

    知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover:  当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...

  4. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

  5. CSharpGL(20)用unProject和Project实现鼠标拖拽图元

    CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...

  6. 【狼】unity 鼠标拖拽物体实现任意角度自旋转

    主要涉及函数 Input.GetAxis(“Mouse x”) 可取得鼠标横向(x轴)移动增量 Input.GetAxis(“Mouse y”) 可取得鼠标竖向(y轴)移动增量 通过勾股定理获取拖拽长 ...

  7. H5原生拖拽事件

    使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

  9. 鼠标拖拽定位和DOM各种尺寸详解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 【图解】Web前端实现相似Excel的电子表格

     在本文中,我将用图解的方式用Wijmo(JavaScript库)中的SpreadJS来一步一步实现网页上的电子表格产品SpreadSheet(比如可构建Office 365 Excel产品.Go ...

  2. ios开发视频播放后台下载功能实现 ：1，ios播放视频 ，包含基于AVPlayer播放器，2，实现下载，iOS后台下载（多任务同时下载，单任务下载，下载进度，下载百分比，文件大小，下载状态）（真机调试功能正常）

    ABBPlayerKit ios开发视频播放后台下载功能实现 : 代码下载地址:https://github.com/niexiaobo/ABBPlayerKit github资料学习和下载地址:ht ...

  3. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  4. 【SSH2（理论+实践）】--图说Struts2的执行

        前几篇文章讨论了有关Struts2的核心机制及一些基础,但同一时候也遗留下了非常多问题.这些问题主要是针对Struts2的一些使用技巧的,该篇文章将会针对Struts2的使用技巧进行讨论, ...

  5. [React Native] Installing and Linking Modules with Native Code in React Native

    Learn to install JavaScript modules that include native code. Some React Native modules include nati ...

  6. Linux之定时任务Crond介绍

    Linux之定时任务 定时任务Crond介绍 Crond是linux系统中用来定期执行命令/脚本或指定程序任务的一种服务或软件,一般情况下,我们安装完Centos5/6 linux操作系统之后,默认便 ...

  7. python3第一天学习（数据类型）

    参考blog地址:http://www.cnblogs.com/wupeiqi/articles/5444685.html,然后根据上面知识点练习并总结. 一.数字(int) 1.数字类型说明   在 ...

  8. JAVA SE回顾及思考（3）——排序算法

    排序的算法是很多公司的笔试和面试题,个人感觉Java中其实无需使用这些排序方法,因为Java中已经为我们提供了很方便效率很高的sort()方法.但是不使用不能代表不需要学习这些算法,也不是仅仅为了面试 ...

  9. sublime 内容高级搜索

    在发展中经常需要搜索内表面的文件.更好地想找到$video->getTitle() 在该文件中使用的表面.好了,这个时候就需要使用高级搜索功能,的操作,如以下: ctrl+shif+f纽带 例如 ...

  10. 利用jQuery传送json格式的字符串,后端用ashx文件来接收

    在Default.aspx里面,我们会透过javascript建立两个物件,分别有Name和Age的属性,再透过Array的方式,将这两个物件塞到Array里面去.使用Ajax内建的$.ajax AP ...