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