跨浏览器拖动HTML元素

矫情吗；* 2022-05-12 00:44 214阅读 0赞

**一 代码**

**HTML代码：**

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    	<title> 拖放效果 </title>
    </head>
    <body>
    
    <script src="drag.js"></script>
    
    <div style="position:absolute;
    			left:120px;
    			top:150px;
    			width:250px; 
    			border:1px solid black;">
    	<div style="background-color:#416ea5; 
    				width:250px;
    				height:22px;
    				cursor:move;
    				font-weight:bold;
    				border-bottom:1px solid black;"
    		οnmοusedοwn="drag(this.parentNode, event);">
    		可拖动标题
    	</div>
    	<p>可被拖动的窗口</p>
    	<p>窗口内容</p>
    </div>
    
    <img src="image/logo.jpg" alt="按住Shift可拖动"
    	style="position:absolute;"
    	οnmοusedοwn="if (event.shiftKey) drag(this, event);" />
    </body>
    </html>

**JS代码：**

var drag = function(target, event)
    {
    	// 定义开始拖动时的鼠标位置（相对window座标）
    	var startX = event.clientX;
    	var startY = event.clientY;
    	// 定义将要被拖动元素的位置（相对于document座标）
    	// 因为该target的position为absolutely，
    	// 所以我们认为它的座标系是基于document的
    	var origX = target.offsetLeft;
    	var origY = target.offsetTop;
    	// 因为后面根据event的clientX、clientY来获取鼠标位置时，
    	// 只能获取windows座标系的位置，所以需要计算window座标系
    	// 和document座标系的偏移。
    	// 计算windows座标系和document座标系之间的偏移
    	var deltaX = startX - origX;
    	var deltaY = startY - origY;
    	// 鼠标松开的事件处理器
    	var upHandler = function(evt) 
    	{
    		// 对于IE事件模型，获取事件对象
    		if (!evt) evt = window.event; 
    		// 取消被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）的事件处理器
    		if (document.removeEventListener)
    		{
    			// DOM事件模型
    			// 取消在事件捕获阶段的事件处理器
    			document.removeEventListener("mouseup", upHandler, true);
    			document.removeEventListener("mousemove", moveHandler, true);
    		}
    		else if (document.detachEvent) 
    		{
    			target.detachEvent("onlosecapture", upHandler);
    			target.detachEvent("onmouseup", upHandler);
    			target.detachEvent("onmousemove", moveHandler);
    			target.releaseCapture( );
    		}
    		// 阻止事件传播
    		stopProp(evt);
    	}
    	// 阻止事件传播(该函数可以跨浏览器)
    	var stopProp = function(evt)
    	{
    		// DOM事件模型
    		if (evt.stopPropagation)
    		{
    			evt.stopPropagation( );
    		}
    		// IE事件模型
    		else
    		{
    			evt.cancelBubble = true;
    		}
    	}
    	// 为被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）注册事件处理器
    	if (document.addEventListener)
    	{
    		// DOM事件模型
    		// 在事件捕获阶段绑定事件处理器
    		document.addEventListener("mousemove", moveHandler, true);
    		document.addEventListener("mouseup", upHandler, true);
    	}
    	else if (document.attachEvent) 
    	{
    		// IE事件模型
    		// 设置该元素直接捕获该事件
    		target.setCapture();
    		// 为该元素鼠标移动时绑定事件处理器
    		target.attachEvent("onmousemove", moveHandler);
    		// 为鼠标松开时绑定事件处理器
    		target.attachEvent("onmouseup", upHandler);
    		// 将失去捕获事件当成鼠标松开处理。
    		target.attachEvent("onlosecapture", upHandler);
    	}
    	// 阻止事件传播
    	stopProp(event);
    	// 取消事件默认行为
    	if (event.preventDefault)
    	{
    		// DOM事件模型
    		event.preventDefault( ); 
    	}
    	else
    	{
    		// IE事件模型
    		event.returnValue = false;
    	}
    	// 鼠标移动的事件处理器
    	function moveHandler(evt)
    	{
    		// 对于IE事件模型，获取事件对象
    		if (!evt) evt = window.event; 
    		// 将被拖动元素的位置移动到当前鼠标位置。
    		// 先将window座标系位置转换成document座标系位置，再修改目标对象的CSS位置。
    		target.style.left = (evt.clientX - deltaX) + "px";
    		target.style.top = (evt.clientY - deltaY) + "px";
    		// 阻止事件传播
    		stopProp(evt);
    	}
    }

** **

**二 运行结果**

![403a5fd7-fcbd-3f77-8247-6d47dbe63bf3.png][]

[403a5fd7-fcbd-3f77-8247-6d47dbe63bf3.png]: /images/20220512/36e73817518f4b8788421cf6be93d292.png

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML实现鼠标拖动元素排序

1. 简介拖放（Drag和 drop）是 HTML5 标准的组成部分，为了使元素可拖动，必须把 draggable 属性设置为 true，整个拖拽事件触发的顺序如

短命女/ 2023年10月07日 19:06/ 0 赞/ 35 阅读

相关 html5元素复制拖动

<!DOCTYPE HTML> <html> <head> <style type="text/css"> div1 { width:198px

我不是女神ヾ/ 2023年03月04日 13:30/ 0 赞/ 13 阅读

相关 vue拖动元素

工具类 drag.js import Vue from 'vue' // 使用Vue.directive()定义一个全局指令 // 1.参数一：指

你的名字/ 2022年12月23日 13:27/ 0 赞/ 233 阅读

相关 Draggable 拖动元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

妖狐艹你老母/ 2022年12月04日 08:37/ 0 赞/ 176 阅读

相关 HTML5拖动

1. ![这里写图片描述][20160614093625780] <style type="text/css"> div1, div2 <!--定义两个装图片的盒

叁歲伎倆/ 2022年08月23日 09:58/ 0 赞/ 170 阅读

相关 [html5]表格拖动

表格拖动前： ![表格拖动前][SouthEast] 表格拖动后： ![表格拖动后][SouthEast 1] 实现代码： function dragF

刺骨的言语ヽ痛彻心扉/ 2022年06月03日 04:09/ 0 赞/ 190 阅读

相关 HTML页面元素拖动

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

阳光穿透心脏的1/2处/ 2022年05月23日 09:24/ 0 赞/ 204 阅读

相关跨浏览器拖动HTML元素

一代码 HTML代码： <!DOCTYPE html> <html> <head> <meta name="author" conten

矫情吗；*/ 2022年05月12日 00:44/ 0 赞/ 215 阅读

相关元素拖动插件

插件：[https://www.html5tricks.com/jquery-drag-element.html][https_www.html5tricks.com_jque

爱被打了一巴掌/ 2022年04月11日 10:09/ 0 赞/ 191 阅读

相关 vue自定义元素拖动

岗位序列拖动交换岗位 <span draggable="true" @dragstart="onD

Dear 丶/ 2021年12月24日 09:29/ 0 赞/ 348 阅读