jQuery实现拖拽，不用jQuery UI的中文编程实现方法

这里例子可以用于Web IDE、工作流拖拽、在线界面设计，更多功能敬请各位开发分享

<!DOCTYPE html>
<html>

<head>
	<title>jQuery拖放操作演示</title>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		const 事件_鼠标按下 = "mousedown";
		const 事件_鼠标抬起 = "mouseup";
		const 事件_鼠标移动 = "mousemove";
		const 左 = "left";
		const 上 = "top";
		const 定位方式 = "position";
		const 绝对 = "absolute";
		const 空 = null;
		const 假 = false;
		const 真 = true;
		const 未定义 = undefined;
		$.fn.获取位置 = $.fn.position;
		$.fn.绑定事件 = $.fn.on;
		$.fn.解绑事件 = $.fn.off;
		$.fn.样式 = $.fn.css;

		$.fn.拖放 = function () {
			let 位置, 拖拽状态, 开始偏移量X, 开始偏移量Y, 目标组件;
			let 拖放容器 = $("html");
			$(this).解绑事件();
			$(this).绑定事件(事件_鼠标按下, function (事件) {
				目标组件 = this;
				位置 = $(目标组件).获取位置();
				开始偏移量X = 事件.pageX;
				开始偏移量Y = 事件.pageY;
				拖拽状态 = 真;
			})
			拖放容器.绑定事件(事件_鼠标抬起, function (事件) {
				位置 = 空; 拖拽状态 = 假; 开始偏移量X = 空; 开始偏移量Y = 空; 目标组件 = 空;
			})
			拖放容器.绑定事件(事件_鼠标移动, function (事件) {
				if (拖拽状态 == 真 && 目标组件 != 未定义) {
					$(目标组件).样式(左, 位置.left + (事件.pageX - 开始偏移量X))
					$(目标组件).样式(上, 位置.top + (事件.pageY - 开始偏移量Y))
					$(目标组件).样式(定位方式, 绝对)
				}
			})
		};

		$(() => {
			$(".可拖放").拖放();
		})
	</script>
</head>

<body>
	<div class="可拖放" style="width:30px;height: 30px;background-color: red;"></div>
	<div class="可拖放" style="width:30px;height: 30px;background-color: blue;"></div>
</body>

</html>

最后说一句：中文编程就是爽

杨若瑜

发布了6 篇原创文章 · 获赞 135 · 访问量 2万+

私信关注

jQuery实现拖拽，不用jQuery UI的中文编程实现方法

猜你喜欢