綜述：綜合考察對於元素的拖動相關API的使用和邏輯思維能力，非常有用的一個實現思路，後期可以將其封裝成一個可以複用的組件積累下來
1.實現拖拽和四個方向拉伸元素的實現方法
<!DOCTYPE html>
<html lang="en">
<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>