Как сделать перетаскивание в JavaScript

Итак, у меня были два предыдущих блога много просмотров, и теперь я думаю сделать еще один учебник по блогу Таким образом, в этом блоге мы делаем простую функцию Drag-n-Drop в JavaScript, и TBH она очень просто и просто для понимания.

Исходный код для Drag-n-Drop

Следуй за мной на GitHub

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, главным образом потому, что он довольно просто, мы просто делаем несколько девственных и некоторых абзацев, а в CSS мы просто немного их стилируем.

Обязательно свяжите свой JavaScript и CSS с 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')
    })
})

Таким образом, в первой и второй строке кода мы просто добавляем наш класс в качестве Const в JavaScript, мы используем Queryseletorall, потому что у нас нет ни одной вещи, присвоенной одним и тем же классом. Okk So в четвертом, как мы делаем функцию Foreach для всех Draggebles, а затем мы просто добавляем в него eventlistener и даем ему «Dragstart» и добавляя в него стиль, используя Draggable.classlist.add . Мы делаем то же самое, но теперь мы заменяем Dragstart на конец перетаскивания, а также вместо того, чтобы добавить, что мы просто удаляем стиль.

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

Умм, теперь мы делаем фальшивую для нашего Div (контейнеры), а затем добавляем eventlistener и просто делаем констант и назначающий «перетаскивание» Queryseletor, а затем просто AppendChild, что в основном означает добавление ребенка к нему.

Таким образом, вы можете сделать базовую функцию перетаскивания, используя этот код, и это было просто, верно?

Оригинал: “https://dev.to/heheprogrammer/how-to-make-a-drag-n-drop-in-javascript-16eo”

Исходный код для Drag-n-Drop

Следуй за мной на GitHub

Читайте ещё по теме: