JavaScript는 드래그 가능한 트리를 구현합니다.-프런트엔드 Q&A-php.cn

웹 애플리케이션의 사용이 증가함에 따라 웹 페이지와의 상호 작용을 위한 보다 효율적인 방법을 설계해야 하는 필요성이 점점 더 커지고 있습니다. 그 중 하나는 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는 일반적으로 세 가지 범주로 구성됩니다.

Dragable 요소
대상 요소 배치
Drag 데이터

이러한 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);
});

로그인 후 복사

드래그 이벤트의 핸들러 기능 구현

드래그 이벤트의 핸들러 기능은 약간 복잡하며 작업의 각 단계를 신중하게 설계해야 합니다. 다음은 각 단계에 대한 지침입니다.

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>

로그인 후 복사

위의 코드 구현을 통해 우리는 드래그 가능한 트리 구조를 성공적으로 만들었습니다. 사용자는 웹 페이지에서 쉽게 드래그 앤 드롭 작업을 통해 트리 구조를 조정할 수 있습니다. 동시에 구현 과정에서 다양한 기술적 세부 사항도 자세히 소개했습니다. 이는 JavaScript를 배우는 개발자에게 매우 유용한 실제 사례입니다.

위 내용은 JavaScript는 드래그 가능한 트리를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!