CSDN-----jquery拖拽圖片
阿新 • • 發佈:2018-11-05
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>