div 移动 drag

最新推荐文章于 2023-11-30 08:39:27 发布

转载最新推荐文章于 2023-11-30 08:39:27 发布 · 600 阅读

文章标签：

#js #div #html #javascript #drag

web 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了如何使用jQuery库实现HTML元素的拖放交互功能，包括事件绑定、位置跟踪和动画效果。

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

<!DOCTYPE html >
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>drag</title>
	<style type="text/css">
		#showDiv{
		      width: 300px;
		      height: 300px;
		      border: 1px solid;
		      position:absolute; 
		      background: gray;
		      left: 800px;
		      top: 300px;
		    }
	</style>
</head>
<body>
	<div id="showDiv">
		dragHTML
	</div>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
	<script type="text/javascript">
		jQuery.fn.extend({
			drag: function() {
				var obj = $(this);
				obj.mousedown(function(e) { // e鼠标事件
					$(this).css("cursor", "move"); // 改变鼠标指针的形状
					var offset = $(this).offset(); // DIV在页面的位置
					var x = e.pageX - offset.left; // 获得鼠标指针离DIV元素左边界的距离
					var y = e.pageY - offset.top; // 获得鼠标指针离DIV元素上边界的距离
					$(document).bind("mousemove", function(ev) { // 绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
						obj.stop(); // 加上这个之后
						var _x = ev.pageX - x; // 获得X轴方向移动的值
						var _y = ev.pageY - y; // 获得Y轴方向移动的值
						obj.animate({
							left: _x + "px",
							top: _y + "px"
						}, 10);
					});

				});
				$(document).mouseup(function() {
					obj.css("cursor", "default");
					$(this).unbind("mousemove");
				});
			}
		});
		$("#showDiv").drag();
	</script>
</body>
</html>