JavaScript的任意拖拽改变盒子的宽高<案例>

最新推荐文章于 2024-04-15 17:25:25 发布

秦卿

最新推荐文章于 2024-04-15 17:25:25 发布

阅读量3.6k

点赞数 4

分类专栏： JavaScript 文章标签： js的任意拖拽改变盒子的宽高案例

本文链接：https://blog.csdn.net/qinqingz/article/details/52834849

版权

这篇博客详细记录了作者如何解决JavaScript中实现元素任意拖拽改变宽高的问题。通过onmousedown、onmousemove和onmouseup三个鼠标事件，实现拖动元素四周调整其大小和位置的功能。案例代码展示了具体的实现过程。

摘要由CSDN通过智能技术生成

前言,虽然说出来确实丢人但我不得不说,这个案例困扰了我很久. 在自己细细的琢磨并且弄懂后记录下来.我认为是一种乐趣. 总体这个案例我们要实现的效果是,拖拽盒子的四周任意改变盒子的宽高与位置在案例中我们需要用到三个关于鼠标的事件.

1、onmousedown 鼠标按下后触发 2、 ommousemove 鼠标每移动一像素触发 3、 onmouseup 鼠标按下送开时触发

初始代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{width: 160px; height: 160px; position: absolute; left: 40%; top: 200px; background: aquamarine;border: 10px solid aqua; box-sizing: border-box;}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

下面是js代码部分: