Pure JavaScript を使用してサイズ変更可能な HTML 要素を作成する方法

純粋な JavaScript を使用したサイズ変更可能な HTML 要素の作成

要素のサイズ変更を可能にする多数のライブラリが存在しますが、純粋な JavaScript ソリューションを求める場合は、次のライブラリが必要です。ステップは次のとおりです使用:

1. イベント リスナー: クリック イベント リスナーを目的の HTML 要素にアタッチします。これにより、サイズ変更プロセスが開始されます。
2. クラスの追加: サイズ変更モードに入ったことを視覚的に示すために、要素に CSS クラス (例: "resizable") を追加します。
3. Resizer 要素の作成: 新しい HTML 要素を作成します。
   を作成し、クラス「resizer」を付けます。この要素はドラッグ ハンドルとして機能します。
4. Resizer のイベント リスナー: マウスダウン イベント リスナーをリサイザーに追加します。これにより、ドラッグ プロセスの開始がトリガーされます。
5. ドラッグの開始: 初期のマウス位置、要素の寸法を保存し、要素のサイズを変更します。 element.
6. ドラッグ関数: マウスの移動に応じて要素の寸法を更新するために、mousemove イベント リスナーをドキュメントに追加します。
7. ドラッグ終了: マウスアップ時に、mousemove および Mouseup イベント リスナーを削除し、サイズ変更を完了します。 process.

このアプローチを実装するサンプル コード スニペットは次のとおりです。

このアプローチは、すべてのブラウザーと、以前のバージョンの Internet Explorer と互換性があるわけではないことに注意してください。 9 には問題があることが特に知られています。