JQuery实现拖拽DIV
之前实现的是以纯javascript进行图片拖拽,昨天发现做特效用jquery代码量减少了一倍多,实现拖拽的技术难点主要是在拖动结束点的控制,在放弃选择拖拽目标时要准确的将事件清除掉,否则就会出现鼠标明明放弃拖拽,目标却还在移动,学习的小伙伴们最好了解清楚bind和unbind在jquery中到底是做什么的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽DIV</title>
<script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
<style>
div{
position: absolute;
width: 200px;
height: 200px;
overflow: hidden;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<img src="../img/wall7.jpg"/>
</div>
</body>
<script>
var div = $('div');
tuozhui(div);
function tuozhui(obj){
obj.bind("mousedown",start);//在obj上添加可清除的mousedown事件
function start(event){
deltaX = event.clientX-obj.offset().left;
deltaY = event.clientY-obj.offset().top;
$(document).bind("mousemove",move);//改变位置
$(document).bind("mouseup",stop);//解除绑定
//阻止默认事件的发生:img身上绑定的事件
//阻止事件冒泡的发生
return false;
}
function move(event){
obj.css({
"left":(event.clientX-deltaX)+"px",
"top":(event.clientY-deltaY)+"px"
});
return false;
}
function stop(){
$(document).unbind("mousemove",move);
$(document).unbind("mouseup",stop);
}
}
</script>
</html>