jQuery实现网页特效之拖拽元素

最新推荐文章于 2022-07-08 15:47:20 发布

我有颗小粒的痣

最新推荐文章于 2022-07-08 15:47:20 发布

阅读量286

点赞数 2

分类专栏：网页前端文章标签： jquery 特效

本文链接：https://blog.csdn.net/weixin_40722661/article/details/78307678

版权

网页前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

效果：

代码：

<!doctype html>
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="./jquery-3.2.1.min.js"></script>
</head>
<body>
		<div id="drag_box" style="height:140px;width:300px;background:red;position:absolute;top:0px;left:0px;"></div>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#drag_box").mousedown(function(){
					var x = $("#drag_box").css("left").split("px");/*将drag_box的left进行加工  split()返回一个数组*/
					var y = $("#drag_box").css("top").split("px");
					var dx = event.pageX - parseInt(x[0]);/*计算距离*/
					var dy = event.pageY - parseInt(y[0]);

					$("#drag_box").mousemove(function(move){
						var now_x = event.pageX;
						var now_y = event.pageY;
						$("#drag_box").css("left", now_x - dx + "px");
						$("#drag_box").css("top", now_y - dy + "px");
						$("#drag_box").mouseup(function(){/*鼠标松开结束move*/
							$("#drag_box").unbind(move);/*移除命名为move的事件*/
						});
					});
				});
			});
		</script>
</body>
</html>

如果添加该特效到网页中：