在實作了可拖動div的元件後，又聯想到拖拽可改變div大小的需求，話不多說先看效果，再來慢慢分析
可是以改變大小的div
元件分析
- 給目标div增加四周的邊框，并且在邊框的八個方向增加拖拽點，分别用方向的首字母組合代替
- 當滑鼠落在八個點上時，滑鼠形狀變成向各個方向拖拽的形狀
- 當滑鼠按下并拖拽時，計算div新的位置和大小，并改變div
邏輯挺簡單的，我們一步步實作
對目标div增加邊框
增加邊框的邏輯很簡單，就是增加一個比目标div大點的div，然後設定邊框。代碼如下
生成邊框的邏輯
對目标div增加拖動點
對于八個點的資訊，我定義了個對象數組分表代表，比如，東面的點我這樣表示
東
class：e用于标記這個點的方位為東面，right、top和transform是用來定位點的具體位置，cursor用來設定光标形狀(每個方向的光标是不同的)，其他方位和這個類似，文末會附上代碼
然後周遊這八個對象，分别生成點，并增加滑鼠事件監聽
生成點的邏輯
這八個點的拖動處理邏輯有所不同，是以單獨寫了個函數，函數傳回每個方向的處理函數，函數名稱和點的class一樣，這樣就可以直接根據class擷取到處理函數，并添加到滑鼠監聽事件中。這個函數這樣定義的：
拖拽函數對象
将生成的邊框和點半綁定到目标div
邊框和點都有了，接下來就簡單了，直接添加到目标div就行(因為生成的都是絕對定位，是以在目标div内部也不影響)
整個元件的結構如下，内容有點多就不貼代碼了，感興趣的可以私信我。
元件結構
使用就更簡單了，和之前一樣
ps：之前對js元件有篇說明，點此連結，之前的拖拽改動位置的也可以參考下，傳送門
源碼連結