鼠标拖拽事件是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. 利用QPainter绘制各种图形（Shape, Pen 宽带，颜色，风格，Cap，Join，刷子）

    利用QPainter绘制各种图形 Qt的二维图形引擎是基于QPainter类的.QPainter既可以绘制几何形状(点.线.矩形.椭圆.弧形.弦形.饼状图.多边形和贝塞尔曲线),也可以绘制像素映射.图 ...

  2. html5中的dom中的各种节点的层次关系是怎样的

    html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...

  3. 雷观(十):管理自己的任务列表(TodoList)很重要

    由幼年,到青年,再到成年,你会发现自己有越来越多的事情要做.参加工作后,很可能要在多个战线上同时忙碌. 最常见的有,工作(可能会加班加点).爱情(不少人忙着恋爱,需要花费很多心思).个人娱乐(玩游戏看 ...

  4. Matlab Tricks（二十五）—— plot 属性

    marker: 边缘:'MarkerEdgeColor', [],(RGB 配色) 填充:'MarkerFaceColor', [](RGB 配色)

  5. 进入Erlang的世界

    http://erlang.group.iteye.com/group/wiki/1407-to-enter-the-world-of-erlang 进入Erlang的世界 作为程序员,我们曾经闻听很 ...

  6. AndroidMainifest标签使用说明3——&lt;activity-alias&gt;

    格式: <activity-alias android:enabled=["true" | "false"] android:exported=[&quo ...

  7. 【9210】找礼物（char* num[2000]的使用 get char num[i] = new char[1000]）

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 新年到了,突然间,就在那美丽的一霎那,你好友和你(K个人)的周围满是礼物,你发扬你帅气的风格,让你的好友先拿 ...

  8. hive 3.1.0 安装配置

    环境: hadoop 3.1.1 hive 3.1.0 mysql 8.0.11 安装前准备: 准备好mysql-connector-java-8.0.12.jar驱动包 上传hive的tar包并解压 ...

  9. hdu1693插头dp(多回路)

    题意:在n*m的矩阵中,有些格子有树,没有树的格子不能到达,找一条或多条回路,吃全然部的树,求有多少中方法. 这题是插头dp,刚刚学习,不是非常熟悉,研究了好几天才明确插头dp的方法,他们老是讲一些什 ...

  10. 数据集（benchmark）、常用数据集的解析（cifar-10、）

    What is the class of this image ? 主要是以下常见的数据集,用以衡量算法的分类准确率: mnist.cifar-10.cifar-100stl-10 svhn.ILSV ...