設置div的寬度和高度 div寬度設置不起作用
在實現了可拖動div的組件后，又聯想到拖拽可改變div大小的需求，話不多說先看效果，再來慢慢分析
文章插圖
文章插圖
可所以改變大小的div
組件分析
- 給目標div增加四周的邊框，并且在邊框的八個方向增加拖拽點，分別用方向的首字母組合代替
- 當鼠標落在八個點上時，鼠標形狀變成向各個方向拖拽的形狀
- 當鼠標按下并拖拽時，計算div新的位置和大小，并改變div
對目標div增加邊框增加邊框的邏輯很簡單，就是增加一個比目標div大點的div，然后設置邊框 。代碼如下
文章插圖
文章插圖
生成邊框的邏輯
對目標div增加拖動點對于八個點的信息，我定義了個對象數組分表代表，比如，東面的點我這樣表示
文章插圖
文章插圖
東
class：e用于標記這個點的方位為東面，right、top和transform是用來定位點的具體位置，cursor用來設定光標形狀（每個方向的光標是不同的），其他方位和這個類似，文末會附上代碼
然后遍歷這八個對象，分別生成點，并增加鼠標事件監聽
文章插圖
文章插圖
生成點的邏輯
這八個點的拖動處理邏輯有所不同，所以單獨寫了個函數，函數返回每個方向的處理函數，函數名稱和點的class一樣，這樣就可以直接根據class獲取到處理函數，并添加到鼠標監聽事件中 。這個函數這樣定義的：
文章插圖
文章插圖
拖拽函數對象
將生成的邊框和點半綁定到目標div邊框和點都有了，接下來就簡單了，直接添加到目標div就行（因為生成的都是絕對定位，所以在目標div內部也不影響）
整個組件的結構如下，內容有點多就不貼代碼了，感興趣的可以私信我 。
文章插圖
文章插圖
組件結構
使用就更簡單了，和之前一樣
推薦閱讀
- ns十大最耐玩的游戲 nds火焰紋章有幾部
- tdcs列車調度指揮系統操作 鐵路調度指揮系統的功能
- 防火墻的基本配置方法 深信服防火墻配置詳細步驟
- 粘貼到篩選后的表格的方法 excel表格篩選后怎么復制粘貼數據
- 拋棄學業離別家鄉的傷感句子
- 菠蘿蜜的膠怎么洗在刀上
- 免試入學的大學比較差嗎
- 手機怎樣設置數字密碼
- 嚴重生銹的螺絲如何擰開
- 商品的特性是什么