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

本是古典何须时尚 2024-01-20 07:22 4阅读 0赞

这里例子可以用于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>

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