优快云-----jquery拖拽图片

最新推荐文章于 2023-09-16 23:19:02 发布

原创最新推荐文章于 2023-09-16 23:19:02 发布 · 253 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #拖拽 #前端

前端开发专栏收录该内容

8 篇文章

订阅专栏

本文分享了使用JQuery简化图片拖拽效果的代码实例，重点介绍了如何利用bind和unbind控制拖动事件，确保鼠标释放时目标停止移动，适合前端开发初学者实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>