JavaScript经典案例：页面元素拖拽

小鱼儿 2022-12-23 11:14 227阅读 0赞

效果展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70_pic_center]

CSS代码：

<style type="text/css">
    	#rect {
    		position: absolute;
    		width: 100px;
    		height: 100px;
    		line-height: 100px;
    		text-align: center;
    		background-color: plum;
    	}
    
    	#circle {
    		position: absolute;
    		width: 100px;
    		height: 100px;
    		line-height: 100px;
    		text-align: center;
    		background-color: tomato;
    	}
    
    	#triangle {
    		position: absolute;
    		width: 100px;
    		height: 100px;
    		line-height: 100px;
    		text-align: center;
    		background-color: deepskyblue;
    	}
    </style>

HTML代码：

<div id="rect">拖动我~</div>
    <div id="circle">拖动我~</div>
    <div id="triangle">拖动我~</div>

JavaScript代码：

<script type="text/javascript">
    	/*
    		元素.setCapture()能够捕获鼠标下一次的点击行为，并将该行为全部揽到调用者自身，取消事件包揽捕获则使用元素.releaseCapture()。
    		例如以按钮为对象调用该方法后，无论在屏幕的哪个地方点击鼠标，按钮的相关事件均会被触发。
    	*/
    	window.onload = function() {
    		function dragElement(object) {
    			object.onmousedown = function(event) { // 为元素绑定鼠标持续点击事件
    				object.setCapture && object.setCapture(); // 兼容浏览器的事件包揽捕获
    				event = event || window.event; // 使用隐式参数兼容不同浏览器
    				var ol = event.clientX - object.offsetLeft; // 获取元素的横向偏移量
    				var ot = event.clientY - object.offsetTop; // 获取元素的纵向偏移量
    				document.onmousemove = function(event) { // 为元素绑定鼠标移动事件
    					event = event || window.event;
    					var left = event.clientX - ol; // 获取元素的横轴坐标
    					var top = event.clientY - ot; // 获取元素的纵轴坐标
    					object.style.left = left + "px"; // 修改元素的绝对定位
    					object.style.top = top + "px";
    				}
    				document.onmouseup = function() { // 为元素绑定鼠标释放事件
    					document.onmousemove = null; // 清除鼠标移动事件
    					document.onmouseup = null; // 清除鼠标释放事件
    					object.releaseCapture && object.releaseCapture(); // 取消事件包揽捕获
    				}
    				// 为保证拖拽功能的正常执行，自出宜取消浏览器搜索引擎的默认搜索行为，IE8除外
    				return false;
    			}
    		}
    
    		dragElement(document.getElementById("rect"));
    		dragElement(document.getElementById("circle"));
    		dragElement(document.getElementById("triangle"));
    	}
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/917c444f876541cd8506830ef371c067.png

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript ---鼠标拖拽元素问题总结

大致分为三个步骤： 1. 鼠标摁下 onmousedown 2. 鼠标移动 onmousemove 3. 鼠标抬起 onmouseup 注意的一点是 onmousem

淩亂°似流年/ 2023年05月21日 08:41/ 0 赞/ 24 阅读

相关 JavaScript经典案例：页面元素拖拽

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

小鱼儿/ 2022年12月23日 11:14/ 0 赞/ 228 阅读

相关 [JavaScript]写一个鼠标拖拽元素事件

<style> div { width: 300px; height: 200px; background-color: pink; position: fixed;

女爷i/ 2022年12月08日 05:00/ 0 赞/ 183 阅读

相关前端 JavaScript -- 实现元素的拖拽功能

实现元素的拖拽功能，类似于桌面的图标，鼠标点击长按可以移动元素当鼠标松开，元素固定到鼠标松开的位置。 <style> box1{ width: 100px; hei

客官°小女子只卖身不卖艺/ 2022年10月29日 11:24/ 0 赞/ 301 阅读

相关 JavaScript 拖拽效果实现

我们在访问一些网站时，会发现有些内容是可以拖拽的，比较方便，那么使用JS怎么实现呢？今天结合代码展示下拖拽效果的实现。这里需要先熟悉下几个JS事件： onmouse

淩亂°似流年/ 2022年05月17日 07:39/ 0 赞/ 329 阅读

相关 javascript 完美拖拽

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Love The Way You Lie/ 2021年11月11日 04:32/ 0 赞/ 394 阅读

相关 javascript拖拽之从浏览器外拖拽（drag）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2021年11月01日 05:40/ 0 赞/ 590 阅读

相关 JavaScript实现网页元素的拖拽效果

下面的页面中放了两个div，可以通过鼠标拖拽这两个元素到任意位置。 ![SouthEast][] ![SouthEast 1][] 实现该效果的HTML页面代

桃扇骨/ 2021年09月22日 03:46/ 0 赞/ 416 阅读

相关 javascript元素拖拽效果的实现

主要涉及三个鼠标事件 mousedown,onmousemove和onmouseup 注意：onmouseup绑定在document对象上，因为释放鼠标时，有可能鼠标不在拖

Dear 丶/ 2021年07月26日 15:38/ 0 赞/ 514 阅读

相关 JavaScript经典案例之按下拖拽、跟随鼠标移动

<!DOCTYPE html> <html> <head lang="en"> <meta charset="GBK">

￡神魔★判官ぃ/ 2021年07月24日 21:46/ 0 赞/ 438 阅读