JavaScript事件——【小案例】拖拽效果

最新推荐文章于 2023-08-05 08:58:09 发布

喋喋小菜鸡

最新推荐文章于 2023-08-05 08:58:09 发布

阅读量204

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/DebbyOctober/article/details/108322364

版权

三个事件：
鼠标按下 onmousedown
鼠标移动 onmousemove
鼠标释放 onmouseup

1.onmouseover 属性在鼠标指针移动到元素上时触发。
注：onmouseover 属性不适用以下元素：
、、、、、、、、、或。

2.onmousemove 属性在鼠标指针移动到元素上时触发。
注：onmousemove 属性不适用以下元素：
在这里插入图片描述

注： onmouseover 属性、onmousemove 属性所有主流浏览器都支持
在这里插入图片描述

3.onmouseup 事件会在鼠标按键被松开时发生。
支持该事件的 HTML 标签：
在这里插入图片描述
支持该事件的 JavaScript 对象：
button, document, link

# 案例1：拖拽盒子改变位置
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	    *{margin:0;padding:0}
	    #box{
	        width:200px;
	        height: 200px;
	        background: steelblue;
	        position: absolute;
	        left:0px;
	        top:0px;
	    }
	</style>
	<body>
	<div id="box"></div>
	<script>
		var box = document.getElementById("box");
		box.onmousedown = function(e){
			var e = window.event || e;
			var x = e.clientX - box.offsetLeft;
			var y = e.clientY - box.offsetTop;
	//赋值变量,记算盒子内部距离,再用总的-内部距离,使鼠标位置不偏移到左上角
			document.onmousemove = function(e){
	//如果写成box.onmousemove，当鼠标移动速度过快会导致鼠标滑出,因此应写document
				var e = window.event || e;
				box.style.left = e.clientX - x+"px";
				box.style.top  = e.clientY - y+"px";
			}//鼠标移动事件必须放在onmousedown鼠标按下里面
		}
		box.onmouseup = function(){
			document.onmousemove = null;//dom 0级
		}
	</script>
	<body>
	</body>
</html>

# 案例2：拖拽小盒子改变宽高

注意（难点）：
鼠标动后的距离-按下鼠标后的距离，就能算出鼠标拖动的距离，然后再+ 盒子本身的宽度

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	    *{margin:0;padding:0}
	    #dv1{
	        width:300px;
	        height: 300px;
	        background: grey;
	        position: relative;
	    }
	    #dv2{
	        width:50px;
	        height: 50px;
	        background: black;
	        position: absolute;
	        bottom:0px;
	        right:0px;
	    }
	</style>
	<body>
	<div id="dv1">
	    <div id="dv2"></div>
	</div>
		<script>
		var dv2 = document.getElementById("dv2"),
		    dv1 = document.getElementById("dv1");
		dv2.onmousedown = function(e){
		        var e = window.event || e;//兼容
		        var x = e.clientX;//按下鼠标后的距离
		        var y = e.clientY;
		        var wdith = dv1.offsetWidth;//盒子本身的宽度
		        var height = dv1.offsetHeight;//盒子本身的高度
				
		        document.onmousemove = function(e){
		            var e = window.event || e;
		            dv1.style.width =wdith + e.clientX-x+"px";
		            dv1.style.height =height + e.clientY-y+"px";
		        }
		}
		dv2.onmouseup = function(){
		    document.onmousemove = null;
		}
		</script>
	</body>
</html>

喋喋小菜鸡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件——【小案例】拖拽效果

三个事件：鼠标按下 onmousedown鼠标移动 onmousemove鼠标释放 onmouseup1.onmouseover 属性在鼠标指针移动到元素上时触发。注：onmouseover 属性不适用以下元素：2.onmousemove 属性在鼠标指针移动到元素上时触发。注：onmousemove 属性不适用以下元素：注： onmouseover 属性、onmousemove 属性所有主流浏览器都支持3.onmouseup 事件会在鼠标按键被松开时发生。支持该事件的 HTML 标
复制链接

扫一扫