JavaScript はドラッグ可能なツリーを実装します
Web アプリケーションの使用が増えるにつれて、Web ページと対話するためのより効率的な方法を設計する必要性がますます高まっています。その 1 つは、JavaScript を使用してドラッグ可能なツリー (ドラッグ アンド ドロップ ツリー) を実装することです。この記事では、JavaScript を使用してドラッグ可能なツリーを作成する方法を紹介し、実装プロセスと関連する技術的な詳細を詳しく説明します。
1. 達成すべき目標
この記事で説明するドラッグ可能なツリーとは、ツリー構造のノードを含む Web ページ上の構造を指し、それらをドラッグ アンド ドロップできます。上下関係を再編成します。このようなツリーを実装するには、次の 2 つの主要な側面を完了する必要があります。
- ツリー構造の実装
まず、ページ内にツリー構造のノードを作成し、レベルとノード間の関連性を決定する必要があります。これらの内容は JSON を使用して表現できます。たとえば、ツリーの構造を次の JSON 形式で保存できます:
{ name: "节点A", children: [{ name: "子节点A1", children: [] }, { name: "子节点A2", children: [{ name: "子节点A2-1", children: [] }] }] }
ツリー構造としてレンダリングすると、次のようになります:
- 节点A |- 子节点A1 |- 子节点A2 |- 子节点A2-1
- ドラッグ アンド アンド ドロップの実装ドロップ機能
ノードをドラッグ アンド ドロップするには、JavaScript テクニックを使用する必要があります。ドラッグ アンド ドロップ API に関しては、一般的に次の 3 つのカテゴリが含まれます。
- ドラッグ可能な要素
- ターゲット要素の配置
- データのドラッグ
これらの API を使用すると、ノードのドラッグ アンド ドロップ機能を簡単に実装できます。
2. 技術的な詳細
目標を理解した後、実装の詳細について詳しく説明します。実装する手順は次のとおりです。
- ツリー構造の構築
最初にノード要素を作成し、通常は ul および li 要素レベルを使用して HTML に追加する必要があります。 。 成し遂げる。各ノードには li 要素が必要であり、さらに多くの li 要素を子ノード ul にネストする必要があります。ツリー構造を JSON データに関連付けるには、data-* 属性を使用して、対応する li 要素に JSON データを格納します。
<ul id="tree"> <li data-name="节点A"> <div class="node">节点A</div> <ul> <li data-name="子节点A1"> <div class="node">子节点A1</div> </li> <li data-name="子节点A2"> <div class="node">子节点A2</div> <ul> <li data-name="子节点A2-1"> <div class="node">子节点A2-1</div> </li> </ul> </li> </ul> </li> </ul>
- ノードへのドラッグ イベントの追加
各ノードに、mousedown、dragstart、dragover、dragleave、drop、dragend などのドラッグ イベントを追加する必要があります。このうち、mousedown イベントとragstart イベントはドラッグを開始する前に処理する必要があり、その後の処理はそれぞれdragover、dragleave、drop、dragendです。これらのドラッグ アンド ドロップ イベントの処理機能は、イベント リスナーを通じて実行できます。
// 获取所有节点并添加事件监听器 const nodes = document.querySelectorAll('.node'); nodes.forEach((node) => { node.addEventListener('mousedown', onMouseDown); node.addEventListener('dragstart', onDragStart); node.addEventListener('dragover', onDragOver); node.addEventListener('dragleave', onDragLeave); node.addEventListener('drop', onDrop); node.addEventListener('dragend', onDragEnd); });
- ドラッグ イベントの処理関数の実装
ドラッグ イベントの処理関数はやや複雑で、各ステップの操作を慎重に設計する必要があります。各ステップの手順は次のとおりです。
- mousedown: ドラッグが開始される要素を記録し、isDragged を true に設定します。
- dragstart: データ送信タイプと送信するデータを設定します。また、isDraggedの状態に基づいてドラッグ操作が可能かどうかを判断する必要がある。データ送信タイプを設定するには、setData() メソッドを使用できます。
function onDragStart(event) { if (!isDragged) { draggedItem = event.currentTarget.parentNode; event.dataTransfer.setData('text/plain', event.currentTarget.dataset.name); isDragged = true; } }
- dragover: デフォルトのイベントを防止し、現在の要素に isOver 属性を追加します。この属性は、現在の要素が他の要素の上に配置され、配置可能であることを示します。デフォルトのイベントは、event.preventDefault() メソッドを通じて防止できます。
function onDragOver(event) { event.preventDefault(); if (!event.currentTarget.dataset.isOver) { event.currentTarget.parentNode.classList.add('over'); event.currentTarget.dataset.isOver = true; } }
- dragleave: 現在の要素の over 属性を削除し、要素上にマウスが置かれていないことを示します。
function onDragLeave(event) { if (event.currentTarget.dataset.isOver) { event.currentTarget.parentNode.classList.remove('over'); event.currentTarget.dataset.isOver = false; } }
- drop: 現在の要素に over 属性があるかどうかに基づいて、配置操作を実行できるかどうかを判断します。動作しない場合は直接終了し、動作する場合は配置操作を実行してツリー構造を調整します。
function onDrop(event) { event.preventDefault(); if (event.currentTarget.dataset.isOver) { const droppedItem = event.currentTarget.parentNode; const parent = draggedItem.parentNode; parent.removeChild(draggedItem); event.currentTarget.parentNode.insertBefore(draggedItem, droppedItem.nextSibling); } }
- dragend: ドラッグ操作の終了イベントを実装します。このイベントでは、isDragged の値をリセットし、属性全体を削除します。
function onDragEnd(event) { event.currentTarget.parentNode.classList.remove('over'); event.currentTarget.dataset.isOver = false; isDragged = false; }
3. 完全なコード
最後に、上記の Javascript コードを統合して、完全なドラッグ可能なツリーを表示します。このコードを直接使用し、テキスト エディターにコピーし、HTML ファイルとして保存して、ブラウザーで実行できます。
可拖动的树 <ul id="tree"> <li data-name="节点A"> <div class="node">节点A</div> <ul> <li data-name="子节点A1"> <div class="node">子节点A1</div> </li> <li data-name="子节点A2"> <div class="node">子节点A2</div> <ul> <li data-name="子节点A2-1"> <div class="node">子节点A2-1</div> </li> </ul> </li> </ul> </li> </ul> <script> let draggedItem = null; let isDragged = false; const nodes = document.querySelectorAll('.node'); nodes.forEach((node) => { node.addEventListener('mousedown', onMouseDown); node.addEventListener('dragstart', onDragStart); node.addEventListener('dragover', onDragOver); node.addEventListener('dragleave', onDragLeave); node.addEventListener('drop', onDrop); node.addEventListener('dragend', onDragEnd); }); function onMouseDown(event) { event.preventDefault(); } function onDragStart(event) { if (!isDragged) { draggedItem = event.currentTarget.parentNode; event.dataTransfer.setData('text/plain', event.currentTarget.dataset.name); isDragged = true; } } function onDragOver(event) { event.preventDefault(); if (!event.currentTarget.dataset.isOver) { event.currentTarget.parentNode.classList.add('over'); event.currentTarget.dataset.isOver = true; } } function onDragLeave(event) { if (event.currentTarget.dataset.isOver) { event.currentTarget.parentNode.classList.remove('over'); event.currentTarget.dataset.isOver = false; } } function onDrop(event) { event.preventDefault(); if (event.currentTarget.dataset.isOver) { const droppedItem = event.currentTarget.parentNode; const parent = draggedItem.parentNode; parent.removeChild(draggedItem); event.currentTarget.parentNode.insertBefore(draggedItem, droppedItem.nextSibling); } } function onDragEnd(event) { event.currentTarget.parentNode.classList.remove('over'); event.currentTarget.dataset.isOver = false; isDragged = false; } </script>
上記のコード実装により、ドラッグ可能なツリー構造を作成できました。Web ページでは、ユーザーはドラッグ アンド ドロップで簡単にツリー構造を調整できます。同時に、実装プロセスにおけるさまざまな技術的な詳細も詳細に紹介されており、JavaScript を学習している開発者にとって非常に役立つ実践事例であることは間違いありません。
以上がJavaScript はドラッグ可能なツリーを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1)JSXはHTMLを埋め込み、開発をより直感的にします。 2)仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3)保守性を向上させるコンポーネントベースの管理UI。 4)国家管理とイベント処理は、インタラクティブ性を高めます。

Reactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1)Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2)コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3)Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4)国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5)基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6)一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。

Reactコンポーネントは、機能またはクラスによって定義され、UIロジックのカプセル化、およびプロップを介して入力データを受け入れることができます。 1)コンポーネントの定義:関数またはクラスを使用して、反応要素を返します。 2)レンダリングコンポーネント:Reactコールレンダリングメソッドまたは機能コンポーネントを実行します。 3)マルチプレックスコンポーネント:データをプロップに渡して、複雑なUIを構築します。コンポーネントのライフサイクルアプローチにより、ロジックをさまざまな段階で実行でき、開発効率とコードメンテナビリティが向上します。

Reactエコシステムには、状態管理ライブラリ(Reduxなど)、ルーティングライブラリ(Reactrouterなど)、UIコンポーネントライブラリ(材料-UIなど)、テストツール(JESTなど)、およびビルディングツール(Webpackなど)が含まれます。これらのツールは、開発者がアプリケーションを効率的に開発および維持し、コードの品質と開発効率を向上させるのを支援するために協力します。

Reactの利点は、その柔軟性と効率性であり、これは以下に反映されています。1)コンポーネントベースの設計により、コードの再利用性が向上します。 2)仮想DOMテクノロジーは、特に大量のデータ更新を処理する場合、パフォーマンスを最適化します。 3)リッチエコシステムは、多数のサードパーティライブラリとツールを提供します。 Reactがどのように機能し、例を使用するかを理解することにより、そのコアコンセプトとベストプラクティスをマスターして、効率的で保守可能なユーザーインターフェイスを構築できます。

Reactは、メタがユーザーインターフェイスを構築するために開発したJavaScriptライブラリであり、そのコアはコンポーネント開発と仮想DOMテクノロジーです。 1。コンポーネントと状態管理:Reactは、コンポーネント(関数またはクラス)とフック(UseStateなど)を介して状態を管理し、コードの再利用性とメンテナンスを改善します。 2。仮想DOMとパフォーマンスの最適化:仮想DOMを介して、実際のDOMを効率的に更新してパフォーマンスを向上させます。 3.ライフサイクルとフック:フック(使用効果など)は、関数コンポーネントがライフサイクルを管理し、副作用操作を実行できるようにします。 4。使用例:基本的なHelloworldコンポーネントから高度なグローバル州管理(USECONTEXTおよび

Reactは、ユーザーインターフェイスを構築するためのフロントエンドフレームワークです。バックエンドフレームワークは、サーバー側のアプリケーションを構築するために使用されます。 Reactはコンポーネントで効率的なUIアップデートを提供し、バックエンドフレームワークは完全なバックエンドサービスソリューションを提供します。テクノロジースタックを選択するときは、プロジェクトの要件、チームのスキル、およびスケーラビリティを考慮する必要があります。

Reactの未来は、究極のコンポーネント開発、パフォーマンスの最適化、および他のテクノロジースタックとの深い統合に焦点を当てます。 1)Reactは、コンポーネントの作成と管理をさらに簡素化し、究極のコンポーネント開発を促進します。 2)特に大規模なアプリケーションでは、パフォーマンスの最適化が焦点になります。 3)Reactは、開発エクスペリエンスを改善するために、GraphQLやTypeScriptなどのテクノロジーと深く統合されます。
