拖拽原理

最新推荐文章于 2023-02-19 13:14:05 发布

长岛冰茶子

最新推荐文章于 2023-02-19 13:14:05 发布

阅读量599

点赞数

分类专栏：事件对象文章标签：事件拖拽

本文链接：https://blog.csdn.net/Zhang_XiaoHeng/article/details/72769751

版权

事件对象专栏收录该内容

10 篇文章 0 订阅

订阅专栏

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽原理</title>
	<style>
		#div1{
			width:100px;
			height:100px;
			background:red;
			position:absolute;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			/*
			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;
				if(oDiv.setCapture){
					oDiv.setCapture();
				}
				document.οnmοusemοve= 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;
					if(oDiv.releaseCapture){
						oDiv.releaseCapture();
					}
				}
				return false;//取消浏览器默认拖拽文字行为
			}
		}
		/*
		obj.setCapture(); 设置全局捕获，当我们给一个元素设置全局捕获以后，那么这个元素就会
		监听后续发生的所有事件，当有事件发生的时候，就会被当前设置全局捕获的元素所触发。
			ie：有，并且有效果
			ff：有，但是没效果
			chrome:没有，会报错
		obj.releaseCapture()释放全局捕获
		 */
		/*
		拖拽的时候，如果有文字被选中，会产生问题
		   原因：当鼠标按下的时候（按下时触发），如果页面中有文字被选中，那么会触发浏览器的默认拖拽文字行为。
		   解决：
		     标准：阻止默认行为
		     非标准ie:用全局捕获
		 拖拽图片有问题，解决办法同上
		 */
	</script>
</head>
<body>
	拖拽文字在此	
	<div id="div1"></div>
</body>
</html>





是

长岛冰茶子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖拽原理

拖拽原理 #div1{ width:100px; height:100px; background:red; position:absolute; } window.onload = function(){ /* onmousedown:鼠标按下时触发 onmousemove:鼠标移动时触发 onmouseup:鼠标抬起时触发
复制链接

扫一扫