如何使用純 JavaScript 建立可調整大小的 HTML 元素？

使用純 JavaScript 建立可調整大小的 HTML 元素

存在許多函式庫來啟用元素調整大小，但對於那些尋求純 JavaScript解決方案的人來說，以下內容可以利用的步驟：

1. 活動偵聽器： 將點擊事件偵聽器附加到所需的 HTML 元素。這將啟動調整大小過程。
2. 新增類別：向元素添加 CSS 類，例如“可調整大小”，以直觀地表明它已進入調整大小模式。
3. Resizer 元素建立： 建立一個新的 HTML 元素，例如
   ，並賦予它「調整大小」類別。此元素將用作拖曳手柄。
4. Resizer 的事件監聽器： 將 mousedown 事件監聽器加入 resizer，這將觸發拖曳過程的開始。
5. 拖曳啟動：儲存初始滑鼠位置、元素尺寸並調整元素大小元素。
6. 拖曳功能：為文件新增 mousemove 事件監聽器，以便在滑鼠移動時更新元素的尺寸。
7. 拖曳終止： 在mouseup 上，移除mousemove 和mouseup 事件監聽器，完成調整大小

以下是實作此方法的範例程式碼片段：

請記住，此方法可能不相容於所有瀏覽器以及以下版本的Internet Explorer已知 9 有問題。