如何使用 Vanilla JS 创建拖放界面

嗨！时隔许久，我回来了，带来一篇关于如何使用 Vanilla JS 创建拖放界面的新文章。

让我们看看在本教程中我们将要创建什么

拖放功能是提升 Web 应用用户体验的绝佳方式。通过拖放功能，用户可以轻松地在页面上移动元素、重新排序列表以及执行其他交互操作。在本教程中，我们将介绍如何使用原生 JavaScript 创建一个简单的拖放界面。

我们将使用 TailwindCSS 进行样式设置，您可以使用纯 CSS 或任何其他 CSS 框架。

那么，让我们用以下代码编写项目的 HTMLindex.html

HTML

<html>
<head>
       <title>Drag and Drop Example</title>
</head>
<body>
    <ul id="list">
        <li id="item1" draggable="true">Item 1</li>
        <li id="item2" draggable="true">Item 2</li>
        <li id="item3" draggable="true">Item 3</li>
        <li id="item4" draggable="true">Item 4</li>
        <li id="item5" draggable="true">Item 5</li>
    </ul>
  <div id="target"></div>
</body>
</html>

现在添加 Tailwind CDN 并向<head>其中添加类

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Example</title>
    <!-- Load Tailwind CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css">

    <style>
        /* Add custom styles here */
    </style>
</head>
<body class="bg-gray-100">

    <div class="max-w-md mx-auto mt-8">

        <!-- Drag and drop list -->
        <div class="p-4 bg-white rounded-lg shadow-lg">
            <ul id="list" class="list-none p-0 m-0 bg-gray-100 border border-gray-300 min-h-40">
                <li id="item1" draggable="true" class="bg-white border border-gray-300 p-4 mb-2 cursor-move">Item 1</li>
                <li id="item2" draggable="true" class="bg-white border border-gray-300 p-4 mb-2 cursor-move">Item 2</li>
                <li id="item3" draggable="true" class="bg-white border border-gray-300 p-4 mb-2 cursor-move">Item 3</li>
                <li id="item4" draggable="true" class="bg-white border border-gray-300 p-4 mb-2 cursor-move">Item 4</li>
                <li id="item5" draggable="true" class="bg-white border border-gray-300 p-4 mb-2 cursor-move">Item 5</li>
            </ul>
        </div>

        <!-- Drop target -->
        <div id="target" class="mt-4 p-4 bg-white rounded-lg shadow-lg border-dashed border-2 border-gray-300 min-h-60">
            <p class="text-center text-gray-400">Drop items here</p>
        </div>

    </div>
    <script src="index.js"></script>
</body>
</html>

现在创建index.js并将其添加到index.html

JavaScript：-
现在为我们的拖放界面编写一些 JS。

const listItems = document.querySelectorAll("#list li");
const target = document.querySelector("#target");

for (const listItem of listItems) {
    listItem.addEventListener("dragstart", dragStart);
}

target.addEventListener("dragover", dragOver);
target.addEventListener("drop", drop);

function dragStart(event) {
    event.dataTransfer.setData("text/plain", event.target.id);
}

function dragOver(event) {
    event.preventDefault();
    target.classList.add("border-gray-500");
}

function drop(event) {
    event.preventDefault();
    const itemId = event.dataTransfer.getData("text/plain");
    const item = document.getElementById(itemId);
    target.appendChild(item);
    target.classList.remove("border-gray-500");
}

代码说明：首先，它使用和
选择页面上的所有列表项和目标元素。这是使用 CSS 选择器完成的：选择元素内 ID 为的所有元素，然后选择 ID 为的元素。document.querySelectorAlldocument.querySelector#list lililist#targettarget

dragstart接下来，它使用循环为每个列表项添加一个事件监听器for...of。当用户开始拖动某个项目时，就会触发此事件监听器。

事件触发时，会调用该dragStart函数。它通过调用来设置被拖拽的数据event.dataTransfer.setData("text/plain", event.target.id)。第一个参数指定数据类型（text/plain在本例中为），第二个参数是被拖拽元素的 ID。

然后，代码会dragover向目标元素添加一个事件监听器。当用户将某个项目拖到目标元素上时，就会触发此事件监听器。

该dragOver函数在事件触发时被调用。它被调用event.preventDefault()以允许drop触发事件。它还会向目标元素添加一个 CSS 类，以指示该元素可以被拖放到上面。

最后，代码drop为目标元素添加了一个事件监听器。当用户将一个项目拖放到目标元素上时，就会触发此事件监听器。

drop事件触发时，会调用此函数。调用此函数event.preventDefault()是为了防止默认行为（即导航到新页面）。然后，它通过调用获取被拖动元素的 ID event.dataTransfer.getData("text/plain")。使用通过 ID 检索元素document.getElementById(itemId)，并使用将其附加到目标元素target.appendChild(item)。最后，它会删除在函数中添加到目标元素的 CSS 类dragOver。

最后，拖放界面就准备好了。

我希望你喜欢这个。

让我们连接：

Github
Twitter
LinkedIn

文章来源：https://dev.to/devrohit0/how-to-create-a-drag-and-drop-interface-using-vanilla-js-9bi