웹 애플리케이션의 사용이 증가함에 따라 웹 페이지와의 상호 작용을 위한 보다 효율적인 방법을 설계해야 하는 필요성이 점점 더 커지고 있습니다. 그 중 하나는 JavaScript를 사용하여 드래그 가능한 트리(Drag & Drop Tree)를 구현하는 것입니다. 이 기사에서는 JavaScript를 사용하여 드래그 가능한 트리를 만드는 방법을 소개하고 구현 프로세스 및 관련 기술 세부 사항을 자세히 설명합니다.
1. 달성 목표
이 글에서 설명하는 드래그 가능한 트리는 트리 구조의 노드를 포함하는 웹 페이지의 구조를 말하며 드래그를 통해 계층적 관계를 재구성할 수 있습니다. 이러한 트리를 구현하려면 다음 두 가지 주요 측면을 완료해야 합니다.
먼저 페이지의 트리 구조에 대한 노드를 생성하고 노드 간의 수준과 관계를 결정해야 합니다. 이러한 내용은 JSON을 사용하여 표현할 수 있습니다. 예를 들어 다음 JSON 형식으로 트리 구조를 저장할 수 있습니다.
{ name: "节点A", children: [{ name: "子节点A1", children: [] }, { name: "子节点A2", children: [{ name: "子节点A2-1", children: [] }] }] }
트리 구조로 렌더링되면 다음과 같아야 합니다.
- 节点A |- 子节点A1 |- 子节点A2 |- 子节点A2-1
노드 드래그 앤 만들기 -drop에는 일부 JavaScript 기술이 필요합니다. 드래그 앤 드롭과 관련된 API는 일반적으로 세 가지 범주로 구성됩니다.
이러한 API를 사용하면 노드의 드래그 기능을 쉽게 구현할 수 있습니다.
2. 기술적 세부사항
목표를 이해한 후 이제 구현 세부 사항에 대해 자세히 논의해 보겠습니다. 구현 단계는 다음과 같습니다.
노드 요소를 먼저 생성하고 일반적으로 ul 및 li 요소 계층을 사용하여 HTML에 추가해야 합니다. 각 노드에 대해 li 요소가 필요하며 하위 노드 ul에 더 많은 li 요소가 중첩되어야 합니다. 트리 구조를 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과 dragstart 이벤트는 드래그가 시작되기 전에 처리되어야 하며, 후속 처리는 각각 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); });
드래그 이벤트의 핸들러 기능은 약간 복잡하며 작업의 각 단계를 신중하게 설계해야 합니다. 다음은 각 단계에 대한 지침입니다.
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; }
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>
위의 코드 구현을 통해 우리는 드래그 가능한 트리 구조를 성공적으로 만들었습니다. 사용자는 웹 페이지에서 쉽게 드래그 앤 드롭 작업을 통해 트리 구조를 조정할 수 있습니다. 동시에 구현 과정에서 다양한 기술적 세부 사항도 자세히 소개했습니다. 이는 JavaScript를 배우는 개발자에게 매우 유용한 실제 사례입니다.
위 내용은 JavaScript는 드래그 가능한 트리를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!