原生JS实现拖拽缩放元素
越陌度阡
发布于 2020-11-26 07:22:05
发布于 2020-11-26 07:22:05
代码可运行
运行总次数：0
代码可运行
今天给大家分享一个用原生JS实现的拖拽缩放元素大小的Demo，效果如下：
以下是代码实现，欢迎大家复制粘贴及吐槽。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现拖拽缩放元素</title>
<style>
#div1 {
width: 11px;
height: 11px;
background-color: #000;
position: absolute;
bottom: 0;
right: 0;
cursor: nw-resize;
}
#div2 {
width: 200px;
height: 150px;
background: #CCC;
position: relative;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oDiv.onmousedown = function (ev) {
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function (ev) {
var oEvent = ev || event;
//要加上子DIV的大小(oDiv.offsetWidth与oDiv.offsetHeight)
oDiv2.style.width = oEvent.clientX - disX + oDiv.offsetWidth + 'px';
oDiv2.style.height = oEvent.clientY - disY + oDiv.offsetHeight + 'px';
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
};
</script>
</head>
<body>
<div id="div2">
<div id="div1"></div>
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/08/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
原生JS实现拖拽元素时与另一元素碰撞检测
更多 >
腾讯云开发者
