溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“javascript如何實現可拖動的樹”，在日常操作中，相信很多人在javascript如何實現可拖動的樹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”javascript如何實現可拖動的樹”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
一、實現的目標
本文所描述的可拖動的樹，是指網頁上的一個結構，其中包含樹形結構的節(jié)點，而我們可以通過拖拽來重新組織它們的層次關系。實現這樣的樹，需要完成以下兩個關鍵方面。
實現樹形結構
首先我們需要在頁面中為樹形結構創(chuàng)建節(jié)點，并確定節(jié)點之間的層次和關聯。這些內容可以使用JSON來表示。例如，我們可以以下列JSON格式存儲樹的結構：
{
name: "節(jié)點A",
children: [{
name: "子節(jié)點A1",
children: []
}, {
name: "子節(jié)點A2",
children: [{
name: "子節(jié)點A2-1",
children: []
}]
}]
}將其呈現為樹狀結構時，應該是這樣的：
- 節(jié)點A |- 子節(jié)點A1 |- 子節(jié)點A2 |- 子節(jié)點A2-1
實現拖放功能
讓節(jié)點可以拖放需要使用一些JavaScript技術。有關拖放的API，常規(guī)來說涉及到三種類：
可拖動的元素
放置目標元素
拖動的數據
使用這些API，我們可以輕松實現節(jié)點的拖拽功能。
二、技術細節(jié)
了解了我們的目標后，現在我們來詳細討論實現細節(jié)。下面是實現的步驟：
構建樹形結構
我們需要先創(chuàng)建節(jié)點元素，并添加它們到HTML中，通常使用ul和li元素層次來實現。對于每一個節(jié)點，都需要一個li元素，而且要在子節(jié)點ul中嵌套更多的li元素。為了將樹形結構和JSON數據關聯，可以使用data-*屬性，將JSON數據存儲在相應的li元素中。
<ul id="tree"> <li data-name="節(jié)點A"> <div class="node">節(jié)點A</div> <ul> <li data-name="子節(jié)點A1"> <div class="node">子節(jié)點A1</div> </li> <li data-name="子節(jié)點A2"> <div class="node">子節(jié)點A2</div> <ul> <li data-name="子節(jié)點A2-1"> <div class="node">子節(jié)點A2-1</div> </li> </ul> </li> </ul> </li> </ul>
給節(jié)點添加拖拽事件
我們需要為每一個節(jié)點添加拖拽事件，包括mousedown、dragstart、dragover、dragleave、drop和dragend。其中，mousedown和dragstart事件需要在拖拽開始前處理，和后續(xù)處理分別依次為dragover、dragleave、drop和dragend。這些拖拽事件的處理函數可以通過事件監(jiān)聽器來完成。
// 獲取所有節(jié)點并添加事件監(jiān)聽器
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的狀態(tài)，判定是否能進行拖拽操作。設置數據傳輸類型可以使用setData()方法。
function onDragStart(event) {
if (!isDragged) {
draggedItem = event.currentTarget.parentNode;
event.dataTransfer.setData('text/plain', event.currentTarget.dataset.name);
isDragged = true;
}
}dragover：阻止默認事件，并在當前元素上添加isOver的屬性。這個屬性表示當前元素被置于其他元素上方，可以執(zhí)行放置操作?？梢酝ㄟ^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代碼整合在一起，展示一個完整的可拖動的樹?？梢灾苯邮褂迷摯a，將其復制到文本編輯器中，保存為html文件即可在瀏覽器中運行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可拖動的樹</title>
<style>
.over {
border-top: 5px solid blue !important;
}
</style>
</head>
<body>
<ul id="tree">
<li data-name="節(jié)點A">
<div class="node">節(jié)點A</div>
<ul>
<li data-name="子節(jié)點A1">
<div class="node">子節(jié)點A1</div>
</li>
<li data-name="子節(jié)點A2">
<div class="node">子節(jié)點A2</div>
<ul>
<li data-name="子節(jié)點A2-1">
<div class="node">子節(jié)點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>
</body>
</html>到此，關于“javascript如何實現可拖動的樹”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
