今天给大家分享一个用原生JS实现的拖拽缩放元素大小的Demo，效果如下：
以下是代码实现，欢迎大家复制粘贴及吐槽。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现拖拽缩放元素</title>
<style>
#box {
width: 200px;
height: 150px;
background: #CCC;
position: relative;
}
#block{
width: 11px;
height: 11px;
background-color: #000;
position: absolute;
bottom: 0;
right: 0;
cursor: nw-resize;
}
</style>
</head>
<body>
<div id="box">
<div id="block"></div>
</div>
<script>
window.onload = function () {
var block = document.getElementById('block');
var box = document.getElementById('box');
block.onmousedown = function (ev) {
var myEvent = ev || event;
var distanceX = myEvent.clientX - block.offsetLeft;
var distanceY = myEvent.clientY - block.offsetTop;
document.onmousemove = function (ev) {
var myEvent = ev || event;
box.style.width = myEvent.clientX - distanceX + block.offsetWidth + 'px';
box.style.height = myEvent.clientY - distanceY + block.offsetHeight + 'px';
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
};
</script>
</body>
</html>
