综述：综合考察对于元素的拖动相关API的使用和逻辑思维能力，非常有用的一个实现思路，后期可以将其封装成一个可以复用的组件积累下来
1.实现拖拽和四个方向拉伸元素的实现方法
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>js实现拖拽和拉伸</title>
</head>
<body>
<div id="test" style="position:absolute;left:0;top:0;width:600px;height:600px; border:1px solid #adadad;">
我是测试的可拉伸，拖动的元素
</div>
<script>
var clickBox = document.getElementById('test');
/**
*time/author：2019/5/9 "mouyao"
*desc:当在当前元素上按下鼠标时，就触发拖动和拉伸操作
*/
clickBox.onmousedown = function(e){
e=e||event; //兼容ie和其他浏览器的写法
var mouseDownX = e.clientX;
var mouseDownY = e.clientY;
var clickBoxLeft = clickBox.offsetLeft;
var clickBoxTop = clickBox.offsetTop;
var clickBoxWeight = clickBox.offsetWidth;
var clickBoxHeight = clickBox.offsetHeight;
var direction = 0;
if (mouseDownX<clickBoxLeft+30) {
direction='left';
} else if (mouseDownX >clickBoxLeft+clickBoxWeight - 30){
direction='right';
}
if (mouseDownY<clickBoxTop+30){
direction = 'top';
} else if (direction < clickBoxTop + clickBoxHeight - 30) {
direction = 'bottom';
}
if ((clickBoxLeft + clickBoxWeight-30)< mouseDownX&&mouseDownX< (clickBoxLeft + clickBoxWeight) && (clickBoxTop+clickBoxHeight-30)<mouseDownY&& mouseDownY<(clickBoxTop+clickBoxHeight)) {
direction = 'rightBottomCorner';
}else if((clickBoxLeft +30)< mouseDownX&&mouseDownX< (clickBoxLeft + clickBoxWeight-30) && (clickBoxTop+30)<mouseDownY&& mouseDownY<(clickBoxTop+clickBoxHeight-30)){ //如果是在中间位置，则实现拖动功能
direction="drag";
}
/**
*time/author：2019/5/9 "mouyao"
*desc:当鼠标开始华东的时候，根据鼠标的移动方向去调整他的X，Y坐标和长宽
*/
document.onmousemove = function(e) {
e = e || event; //是要是使用原生js给我们提供的e回调参数，这存储了很多有用的信息
var xx = e.clientX;
var yy = e.clientY;
if (direction==='left') {
clickBox.style.width = clickBoxWeight + mouseDownX - xx + 'px'
clickBox.style.left = xx + 'px';
} else if (direction==='right') {
clickBox.style.width = clickBoxWeight + xx - mouseDownX + 'px'
}
if (direction==='top'){
clickBox.style.height = clickBoxHeight + mouseDownY - yy + 'px';
clickBox.style.top = yy + 'px';
} else if (direction==='bottom'){
clickBox.style.height = clickBoxHeight + yy - mouseDownY + 'px';
}
if (direction==='rightBottomCorner'){
clickBox.style.width = clickBoxWeight +xx-mouseDownX+'px'
clickBox.style.left =clickBoxLeft+'px';
clickBox.style.height = clickBoxHeight +yy-mouseDownY+'px';
clickBox.style.top =clickBoxTop+'px';
}else if(direction==="drag"){
clickBox.style.left =xx-mouseDownX+clickBoxLeft+ 'px';
clickBox.style.top =yy-mouseDownY+clickBoxTop+ 'px';
}
//return false; //这里为了避免抖动
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
if (e.preventDefault){
e.preventDefault();
}
};
/**
*time/author：2019/5/9 "mouyao"
*desc:在拉伸的过程中，实现居中状态长存,有时间将其做成一个插件公布出来，供大家使用
*/
</script>
</body>
</html>
![实现计算器功能[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)