如何在 JavaScript 中实现拖放功能

好的，我之前的两个博客获得了很多浏览量，现在我正在考虑制作另一个博客教程，所以在这个博客中，我们将用 JavaScript 制作一个简单的拖放功能，说实话，它非常容易和简单易懂。

在 Github 上关注我

    <div class="container">
        <p class="draggable" draggable="true">1</p>
        <p class="draggable" draggable="true">2</p>
    </div>
    <div class="container">
        <p class="draggable" draggable="true">3</p>
        <p class="draggable" draggable="true">4</p>
    </div>

body {
    margin: 0;
    background-color: #ff4040;
}

.container {
    background-color: #333;
    padding: 1rem;
    margin-top: 1rem;
}

.draggable {
    padding: 1rem;
    background-color: white;
    border: 1px solid black;
    cursor: move;
}

.draggable.dragging {
    opacity: .5;
}

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {
    draggable.addEventListener('dragstart', () => {
        draggable.classList.add('dragging')
    })
    draggable.addEventListener('dragend', () => {
        draggable.classList.remove('dragging')
    })
})
containers.forEach(container => {
    container.addEventListener('dragover', e => {
        e.preventDefault()
        const draggable = document.querySelector('.dragging')
        container.appendChild(draggable)
    })
})

这就是整个代码，我不会解释 html 和 css，主要是因为它非常简单，我们只是制作一些 div 和一些段落，然后在 css 中我们只是对它们进行一点点样式设置。

make sure to link your javascript and css to html

好的，现在让我们学习一下在 javascript 中做什么。

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {
    draggable.addEventListener('dragstart', () => {
        draggable.classList.add('dragging')
    })
    draggable.addEventListener('dragend', () => {
        draggable.classList.remove('dragging')
    })
})

因此在第一行和第二行代码中，我们只是在 javascript 中将我们的类添加为 const，我们使用 querySeletorAll 因为我们没有为同一个类分配任何内容。okk
所以在第四行中，我们为所有可拖动对象创建一个 forEach 函数，然后我们在其中添加一个 EventListener 并赋予它“dragstart”并使用为其添加样式

draggable.classList.add

。
我们正在做同样的事情，但现在我们用 drag end 替换 dragstart，并且我们不是添加而是删除样式。

containers.forEach(container => {
    container.addEventListener('dragover', e => {
        e.preventDefault()
        const draggable = document.querySelector('.dragging')
        container.appendChild(draggable)
    })
})

嗯，现在我们为我们的 div（容器）制作 forEach，然后添加一个 eventListener 并创建一个 const 并分配 querySeletor '拖动'，然后附加 Child，这基本上意味着向其中添加一个子项。

因此您可以使用此代码实现基本的拖放功能，这很容易，对吗？

鏂囩珷鏉ユ簮锛�https://dev.to/heheprogrammer/how-to-make-a-drag-n-drop-in-javascript-16eo

如何在 JavaScript 中实现拖放功能

如何在 JavaScript 中实现拖放功能

拖放源代码

在 Github 上关注我