鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等
本次我才用jQuery实现一个尽可能高效的拖拽效果,代码中有细节上的解释,就不多说了,代码很简洁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></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>
效果示意