javascript實作可拖曳的樹-前端問答-PHP中文網

隨著網路應用程式越來越多地被應用，我們愈加需要能夠為網頁的互動設計更有效率的方法。其中之一就是使用JavaScript實作可拖曳的樹（Drag & Drop Tree）。本文將介紹如何使用JavaScript建立可拖曳的樹，詳細介紹實作的流程及其相關技術細節。

一、實現的目標

本文所描述的可拖曳的樹，是指網頁上的一個結構，其中包含樹形結構的節點，而我們可以透過拖曳來重新組織它們的層次關係。實現這樣的樹，需要完成以下兩個關鍵面向。

實作樹狀結構

首先我們需要在頁面中為樹狀結構建立節點，並確定節點之間的層次和關聯。這些內容可以使用JSON來表示。例如，我們可以以下列JSON格式儲存樹的結構：

{
    name: "节点A",
    children: [{
        name: "子节点A1",
        children: []
    }, {
        name: "子节点A2",
        children: [{
            name: "子节点A2-1",
            children: []
        }]
    }]
}

登入後複製

將其呈現為樹狀結構時，應該是這樣的：

- 节点A
  |- 子节点A1
  |- 子节点A2
     |- 子节点A2-1

登入後複製

實作拖曳功能

讓節點可以拖曳需要使用一些JavaScript技術。有關拖曳的API，常規來說牽涉到三種類：

可拖曳的元素
#放置目標元素
拖曳的資料

使用這些API，我們可以輕鬆實現節點的拖曳功能。

二、技術細節

在了解了我們的目標後，現在我們來詳細討論實作細節。以下是實作的步驟：

建構樹狀結構

我們需要先建立節點元素，並加入它們到HTML中，通常使用ul和li元素層次來實現。對於每一個節點，都需要一個li元素，而且要在子節點ul中嵌套更多的li元素。為了將樹狀結構和JSON資料關聯，可以使用data-*屬性，將JSON資料儲存在對應的li元素中。

<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的值，並移除所有的over屬性。

function onDragEnd(event) {
    event.currentTarget.parentNode.classList.remove('over');
    event.currentTarget.dataset.isOver = false;
    isDragged = false;
}

登入後複製

三、完整程式碼

最後，我們將以上的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中文網其他相關文章！