JavaScript melaksanakan pepohon boleh seret

Memandangkan aplikasi web semakin digunakan, kami semakin perlu mereka bentuk kaedah yang lebih cekap untuk interaksi dengan halaman web. Salah satunya ialah menggunakan JavaScript untuk melaksanakan pokok boleh seret (Drag & Drop Tree). Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencipta pepohon boleh seret, memperincikan proses pelaksanaan dan butiran teknikal yang berkaitan.

1. Matlamat tercapai

Pokok boleh seret yang diterangkan dalam artikel ini merujuk kepada struktur pada halaman web, yang mengandungi nod struktur pokok, dan kami boleh menyeret dan melepaskannya hubungan hierarki mereka. Untuk melaksanakan pokok tersebut, dua aspek utama berikut perlu dilengkapkan.

1. Melaksanakan struktur pokok

Mula-mula kita perlu mencipta nod untuk struktur pokok dalam halaman dan menentukan tahap dan perhubungan antara nod. Kandungan ini boleh diwakili menggunakan JSON. Sebagai contoh, kita boleh menyimpan struktur pokok dalam format JSON berikut:

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

Apabila dipaparkan sebagai struktur pokok, ia sepatutnya kelihatan seperti ini:

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

2. Laksanakan seret dan fungsi drop

Membuat nod drag-and-drop memerlukan penggunaan beberapa teknik JavaScript. Mengenai API seret dan lepas, secara amnya, ia melibatkan tiga kategori:

• Elemen boleh seret
• Elemen sasaran letak
• Data seret

Menggunakan API ini, kami boleh melaksanakan fungsi seret dan lepas nod dengan mudah.

2. Butiran teknikal

Setelah memahami matlamat kami, mari kita bincangkan butiran pelaksanaan secara terperinci. Berikut adalah langkah-langkah untuk melaksanakan:

1. Membina struktur pokok

Kita perlu mencipta elemen nod terlebih dahulu dan menambahkannya pada HTML, biasanya menggunakan tahap elemen ul dan li . Untuk setiap nod, elemen li diperlukan dan lebih banyak elemen li mesti bersarang dalam nod anak ul. Untuk mengaitkan struktur pepohon dengan data JSON, anda boleh menggunakan atribut data-* untuk menyimpan data JSON dalam elemen li yang sepadan.

<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>

2. Tambahkan acara seret pada nod

Kita perlu menambah acara seret pada setiap nod, termasuk tetikus turun, mula seret, dragover, daun seret, lepas dan seret. Antaranya, acara turun tetikus dan mula seret perlu diproses sebelum penyeretan bermula, dan pemprosesan seterusnya ialah dragover, dragleave, drop dan dragend masing-masing. Fungsi pengendalian acara seret dan lepas ini boleh diselesaikan melalui pendengar acara.

// 获取所有节点并添加事件监听器
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);
});

3. Melaksanakan fungsi pengendali acara seret

Fungsi pengendali acara seretan agak rumit dan memerlukan reka bentuk yang teliti bagi setiap langkah. Berikut ialah arahan untuk setiap langkah:

• turun tetikus: Rekod elemen tempat seretan bermula dan tetapkan isDragged kepada benar.
• dragstart: Tetapkan jenis penghantaran data dan data yang akan dihantar. Di samping itu, adalah perlu untuk menentukan sama ada operasi seret boleh dilakukan berdasarkan status isDragged. Untuk menetapkan jenis penghantaran data, anda boleh menggunakan kaedah setData().

function onDragStart(event) {
    if (!isDragged) {
        draggedItem = event.currentTarget.parentNode;
        event.dataTransfer.setData('text/plain', event.currentTarget.dataset.name);
        isDragged = true;
    }
}

• dragover: Halang acara lalai dan tambah atribut isOver pada elemen semasa. Atribut ini menunjukkan bahawa elemen semasa diletakkan di atas elemen lain dan boleh diletakkan. Peristiwa lalai boleh dihalang melalui kaedah event.preventDefault().

function onDragOver(event) {
    event.preventDefault();
    if (!event.currentTarget.dataset.isOver) {
        event.currentTarget.parentNode.classList.add('over');
        event.currentTarget.dataset.isOver = true;
    }
}

• dragleave: Alih keluar atribut atas unsur semasa, menunjukkan bahawa tiada tetikus melayang di atas elemen.

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

• drop: Tentukan sama ada operasi peletakan boleh dilakukan berdasarkan sama ada elemen semasa mempunyai atribut over. Jika ia tidak berfungsi, keluar terus jika ia berfungsi, lakukan operasi peletakan dan laraskan struktur pokok.

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: melaksanakan acara penamatan operasi seret. Dalam acara ini, tetapkan semula nilai isDragged dan alih keluar semua atribut.

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

3. Lengkapkan kod

Akhir sekali, kami menyepadukan kod Javascript di atas untuk memaparkan pokok boleh seret yang lengkap. Anda boleh menggunakan kod secara terus, menyalinnya ke dalam penyunting teks, menyimpannya sebagai fail html dan menjalankannya dalam penyemak imbas.

    
    
    


<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>

Melalui pelaksanaan kod di atas, kami telah berjaya mencipta struktur pokok boleh seret Dalam halaman web, pengguna boleh melaraskan struktur pokok dengan mudah dengan menyeret dan menjatuhkan. Pada masa yang sama, kami juga memperkenalkan secara terperinci pelbagai butiran teknikal semasa proses pelaksanaan. Ini sudah pasti kes praktikal yang sangat berguna untuk pembangun yang sedang mempelajari JavaScript.

Atas ialah kandungan terperinci JavaScript melaksanakan pepohon boleh seret. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!