拖拽事件

最新推荐文章于 2024-02-22 16:53:56 发布
最新推荐文章于 2024-02-22 16:53:56 发布
阅读量2.6k 收藏 2
点赞数 1
分类专栏： web前端 js 文章标签： javascript html5 web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28292937/article/details/52495266
版权

拖拽事件原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原理</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 200px;
            top:100px;
        }
    </style>
</head>
<body>
123456
<div id="div1"></div>
</body>
<script>
    window.onload = function () {
        /*
        1 拖拽的时候如果有文字选中  会有问题 原因：当鼠标按下的时候如果有文字选中会出发浏览器的默认拖拽文字效果
        解决就是  组织默认行为 return:false;只是在标准下  ie8以下不支持
        setCapture();设置全局捕获，当给元素设置之后  就会监听后续发生的所有事件，就会触发全局捕获的元素所触发；
         onmousedown选择元素
         onmousemove移动元素
         onmouseup释放元素

         * */
        var oDiv = document.getElementById("div1");
        oDiv.onmousedown = function (ev) {
            var ev = ev || event;
            var disX = ev.clientX - this.offsetLeft;
            var disY = ev.clientY - this.offsetTop;

            document.onmousemove = function (ev) {
                var ev = ev || event;
                oDiv.style.left = ev.clientX - disX + 'px';
                oDiv.style.top = ev.clientY - disY + 'px';
            }
            document.onmouseup = function () {
                document.onmousemove = null;

            }
            return false;
        }
    }
</script>
</html>
上面出现的问题就是当有选中文字的时候会发生问题  解决方法就是最后的return false；


2.拖拽图片也会出现问题：

会只能拖拽阴影部分解决方法如下


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#img1 { position: absolute;}
</style>
<script>
window.onload = function() {
	
	/*
	1.拖拽的时候，如果有文字被选中，会产生问题
		原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果
			解决：
				标准：阻止默认行为
				非标准ie：全局捕获
	拖拽图片会有问题，原因，解决的办法同上
	*/
	
	var oDiv = document.getElementById('div1');
	var oImg = document.getElementById('img1');
	
	oImg.onmousedown = function(ev) {
		var ev = ev || event;
		
		var disX = ev.clientX - this.offsetLeft;
		var disY = ev.clientY - this.offsetTop;
		
		if ( oImg.setCapture ) {
			oImg.setCapture();
		}
		
		document.onmousemove = function(ev) {
			var ev = ev || event;
			
			oImg.style.left = ev.clientX - disX + 'px';
			oImg.style.top = ev.clientY - disY + 'px';
		}
		
		document.onmouseup = function() {
			document.onmousemove = document.onmouseup = null;
			//释放全局捕获 releaseCapture();
			if ( oImg.releaseCapture ) {
				oImg.releaseCapture();
			}
		}
		
		return false;
		
	}
	
}
</script>
</head>

<body>
	jafldsfjdsjfkl
	<div id="div1"></div>
    <img src="1.jpg" id="img1" />
</body>
</html>

拖拽的封装： 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#img1 { position: absolute;}
</style>
<script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	var oImg = document.getElementById('img1');
	
	drag(oImg);
	
	drag(oDiv);
	
	function drag(obj) {
		
		obj.onmousedown = function(ev) {
			var ev = ev || event;
			
			var disX = ev.clientX - this.offsetLeft;
			var disY = ev.clientY - this.offsetTop;
			
			if ( obj.setCapture ) {
				obj.setCapture();
			}
			
			document.onmousemove = function(ev) {
				var ev = ev || event;
				
				obj.style.left = ev.clientX - disX + 'px';
				obj.style.top = ev.clientY - disY + 'px';
			}
			
			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				//释放全局捕获 releaseCapture();
				if ( obj.releaseCapture ) {
					obj.releaseCapture();
				}
			}
			
			return false;
			
		}
		
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
    <img src="1.jpg" id="img1" />
</body>
</html>


碰撞检测  ： 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute; z-index: 2;}
#img1 { position: absolute; left: 500px; top: 200px;}
</style>
<script>
window.onload = function() {
	
	var oDiv = document.getElementById('div1');
	var oImg = document.getElementById('img1');
	
	drag(oDiv);
	
	function drag(obj) {
		
		obj.onmousedown = function(ev) {
			var ev = ev || event;
			
			var disX = ev.clientX - this.offsetLeft;
			var disY = ev.clientY - this.offsetTop;
			
			if ( obj.setCapture ) {
				obj.setCapture();
			}
			
			document.onmousemove = function(ev) {
				var ev = ev || event;
				
				var L = ev.clientX - disX;
				var T = ev.clientY - disY;
				
				var L1 = L;
				var R1 = L + obj.offsetWidth;
				var T1 = T;
				var B1 = T + obj.offsetHeight;
				
				var L2 = oImg.offsetLeft;
				var R2 = L2 + oImg.offsetWidth;
				var T2 = oImg.offsetTop;
				var B2 = T2 + oImg.offsetHeight;
				
				if ( R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2 ) {
					oImg.src = '1.jpg';
				} else {
					oImg.src = '2.jpg';
				}
				
				obj.style.left = L + 'px';
				obj.style.top = T + 'px';
				
			}
			
			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				if ( obj.releaseCapture ) {
					obj.releaseCapture();
				}
			}
			
			return false;
			
		}
		
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
    <img src="1.jpg" id="img1" />
</body>
</html>

窗帘似的模拟滚动条 改变其他的变化 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
#div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
#div3 {width: 500px; height: 0; background: green; position: absolute; left: 50px; top: 10px;}
</style>
<script>
window.onload = function() {
	
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3');
	
	var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
	
	oDiv2.onmousedown = function(ev) {
		
		var ev = ev || event;
		
		var disY = ev.clientY - this.offsetTop;
		
		document.onmousemove = function(ev) {
			
			var ev = ev || event;
			
			var T = ev.clientY - disY;
			
			if ( T < 0 ) {
				T = 0;
			} else if ( T > iMaxTop ) {
				T = iMaxTop;
			}
			
			oDiv2.style.top = T + 'px';
			
			var iScale = T / iMaxTop;
			
			document.title = iScale;
			
			oDiv3.style.height = 500 * iScale + 'px';
			
		}
		
		document.onmouseup = function() {
			
			document.onmousemove = document.onmouseup = null;
			
		}
		
		return false;
		
	}
	
}
</script>
</head>

<body>
	<div id="div1">
    	<div id="div2"></div>
    </div>
    <div id="div3"></div>
</body>
</html>

张张张的博客
关注
专栏目录
js拖拽事件
xhsvwf的博客
06-20 702
首先我们创建一个div标签，给div标签一个id，后面写js时要用到；再在style里面写上它的样式 在浏览器内打开是这个样子 然后就是js部分的内容，我们先声明一个变量 btn 来获取div里面的id，从而绑定之后的事件。 拖拽要用到三个事件，分别为onmousedown，onmousemove,onmouseup。下面是这三个事件的定义和功能 我们先写一个onmousedown的方法，该方法是鼠标按下时才能触发。再在该方法里面获取...
html5拖拽事件，结合javascript
weixin_53027472的博客
09-01 714
html5拖拽事件，结合javascript
拖拽用到的 js事件
qq_25131799的博客
10-19 1378
1.拖拽用到的 js事件 drag、dragstart、dragend、dragenter、dragover、dragleave、drop 2.代码展示 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &am
js 前端鼠标拖动事件实例
12-11
在JavaScript前端开发中，鼠标拖动事件是一种常见的交互方式，让用户能够通过鼠标操作元素在页面上移动。这个实例主要涉及的关键词是“js”（JavaScript）、“ASP”（尽管在这个上下文中并不直接相关，但可能是用户...
JavaScript鼠标拖拽事件详解
10-15
JavaScript中的鼠标拖拽事件是创建交互式用户界面的重要部分，特别是在网页中移动或操作元素时。在本例中，我们将详细讲解如何实现一个简单的图片拖拽功能，这将涵盖`onmousedown`, `onmousemove`, 和 `onmouseup` ...
Unity3d C# 实现滑动条（Slider）的拖拽开始和结束、点击等事件的拓展功能
10-06
点击事件可以通过OnPointerClick方法实现，但需要注意的是，Unity的点击事件可能与拖动事件冲突，因此需要合理处理这两个事件的触发条件。 ```csharp void OnPointerClick(PointerEventData eventData) { if (!...
使用javaScript实现鼠标拖拽事件
11-27
在JavaScript中，实现鼠标拖拽事件是通过监听和处理鼠标的相关事件来完成的，这些事件主要包括`mousedown`（鼠标按下）、`mousemove`（鼠标移动）和`mouseup`（鼠标释放）。下面将详细介绍如何使用JavaScript来实现...
事件拖拽
weixin_45615650的博客
03-25 159
** 事件拖拽 ** 例如利用鼠标对一个盒子进行拖拽移动位置： 用到的事件有： onmousemove 鼠标移动 onmousedown 鼠标按下 onmouseup 鼠标松开 事件对象的event： event.clientX 获取鼠标的X轴 event.clientY 获取鼠标的Y轴 相关问题处理： 鼠标在拖拽盒子时，鼠标点击哪，鼠标就在哪，不会自动变化原理位置的问题解决： 通过获取鼠标的X轴和Y轴分别减去盒子左边距离和上边距离，结果为鼠标在盒子内离左边和上边的距离 获取盒子外左边的距离为：盒子
JS 拖拽事件
本郡主是喵
09-25 1044
4. 将元素拖拽放置在容器中(在容器中松开鼠标),在在容器中绑定一个ondrop 事件中,同样需要调用 e.preventDefault() 方法来阻止默认行为。2.移动鼠标(monusemove),获取移动元素中鼠标的clientX、clientY 减去上边求出的鼠标到元素边界的距离 ,求出元素移动top、left值，赋给元素。下面有2个元素,判断2个元素是否碰撞,如果碰撞的情况非常多，我们可以考虑没碰撞的情况，下面满足任意一种情况就是没碰撞的。3.松开鼠标(monuseup),将鼠标移动事件清除清除。
拖放拖拽事件
weixin_68094927的博客
12-24 861
一个典型的拖拽操作是这样的：用户选中一个可拖拽的（draggable）元素，并将其拖拽（鼠标不放开）到一个可放置的（droppable）元素，然后释放鼠标。拖放过程：首先使用鼠标指针进入源对象，然后按住鼠标左键拖动源对象，当移动鼠标时源对象会跟随鼠标指针移动，如果源对象进入了目标对象，就松开鼠标左键让源对象放置在目标对象中。拖放的概念：拖放（Drag 和 drop）是 HTML5 标准的组成部分，是页面中的元素从初始位置被拖动到新的位置的用户行为，如拖拽页面中的指定元素到另一个元素中。
js拖拽用到的事件
qq_44718666的博客
08-13 701
拖拽会用到哪些事件 dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件. dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮 dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素. dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果. drag:拖拽期间在被拖拽元素上连续触发 drop:鼠标在拖放.
HTML5-拖拽事件
coral_150的博客
02-22 818
HTML5拖拽接口：在浏览器中实现拖放。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。
拖动事件
xushilong0812的博客
08-18 425
标签属性 draggable：true 事件 被拖动的源对象可以触发的事件 ondragstart：被拖动 ondrag：被拖动过程中 ondragend：源对象被拖动结束 拖动源对象可以进入到上方的目标对象可以触发的事件 ondragover：目标对象悬停在源对象上方 （return false）阻止默认事件 ondragleave：目标对象被拖拽离开源对象 ondrop ：目标对象在源对象上松手 ondragenter：被拖动进入 event.target 同当前this ```css &l
qwidget响应拖拽事件
最新发布
09-11
QWidgets库是Qt框架的一部分，它提供了一套丰富的用户界面组件，包括用于创建窗口和控件的基础部件。对于拖拽事件处理，QWidgets中的QWidget类支持通过连接`dragEnterEvent()`、`...其他槽函数中处理拖动事件 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值