鼠标拖拽事件是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. .Net Core身份认证：IdentityServer4实现OAuth 2.0 客户端模式 - 简书

    原文:.Net Core身份认证:IdentityServer4实现OAuth 2.0 客户端模式 - 简书 一.客户端模式介绍 客户端模式(Client Credentials Grant)是指客户 ...

  2. 【u017】请柬

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣传剧院, ...

  3. 关于pptpd log日志文件的配置

    如何开启pptpd默认日志记录功能. 修改/etc/ppp/options.pptpd中的nologfd,默认没有开,把nologfd注释掉,然后添加 logfile /var/log/pptpd.l ...

  4. Linux 网络编程系列教程

    一.基础理论篇 01.网络协议入门 02.LAN.WAN.WLAN.VLAN 和 VPN 的区别 03.IP 地址介绍 04.广播地址介绍 05.无连接和面向连接协议的区别 06.因特网的IP协议是不 ...

  5. Activity“ 阻止自动弹出软键盘”的方法 -尤其是对于Tab页下的！

    我的activity是Tab页签下的~! 所以应把代码加在继承于TabActivity的那个activity中!!而不是由点击Tab页启动的那个activity <activity androi ...

  6. 【？？？？】最短路(short)

    问题描述: 给出N个点,M条无向边的简单图,问所有点对之间的最短路. 数据输入: 第1行两个正整数N,M(N<=100,M<=5000) 下面M行,每行3个正整数x, y, w,为一条连接 ...

  7. Java 出现内存溢出的定位以及解决方案

    在上一节中Java虚拟机内存分布   说了Java虚拟机中分为五个区域,而且也知道了在Java程序计数器区域不会出现OOM(OutOfMemeryError),那么以下就对除了程序计数器以外的四个区域 ...

  8. 使用多target来构建大量相似App

    转自 come from : http://devtang.com/blog/2013/10/17/the-tech-detail-of-ape-client-1/ 猿题库iOS客户端的技术细节(一) ...

  9. Mochiweb的设计分析

    http://blog.csdn.net/dp0304/article/details/6994435 Web服务器的基本工作大致分3步: 接收HTTP请求: 处理HTTP请求,生成响应内容: 发送响 ...

  10. hbase 2.0.2 分布式安装配置/jar包替换

    环境 zk: 3.4.10 hadoop 2.7.7 jdk8 hbase 2.0.2 三台已安装配置好的hadoop002,hadoop003,hadoop004 1.上传并解压hbase-2.1. ...