CSDN-----jquery拖拽图片

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>

CSDN-----jquery拖拽图片

猜你喜欢