鼠标拖拽事件是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