Jmeter Mixin terminal electron Font Awesome angularjs版本 河南普通话 jquery获取元素宽度 android富文本框架 winbox使用教程 jquery validate python怎么下载安装 python函数内定义函数 java例子 java8时间 java的泛型 java获取当前ip java数组转集合 linux用户 php开发实例 魔兽世界字体包 flash相册制作 猫爪 mounted java分布式开发 tftpd64 js删除节点 vnc客户端 橄榄山快模 ABViewer 超过响应缓冲区限制 平面设计软件下载 windows游戏编程 4k对齐是什么意思 office2010免费版 鼠标速度怎么调 视频旋转软件 mysql定时备份 巫师3福利 七彩虹网驰版为什么坑
当前位置: 首页 > 学习教程  > 编程语言

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

2020/8/31 15:48:26 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

三个事件:
鼠标按下 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>


本文链接: http://www.dtmao.cc/news_show_150429.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?