В этой статье будет рассказываться как сделать drag’n’drop на чистом JavaScript, или если на русском, то перемещение элементов.
HTML и CSS:
Сперва, нам нужно создать в объект для перемещение и задать ему нужные стили.
1 | <div id="block"></div> |
Тут просто добавляем в HTML, <div> элемент с ID block.
1 2 3 4 5 6 | #block { width: 100px; height: 100px; background-color: red; position: absolute; } |
Здесь мы задаём блоку сначала ширину и высоту, потом цвет, и самое главное задаём позиционирование absolute, вот результат.
Благодаря такому позиционированию, мы сможем спокойно перемешать объект куда нам надо.
Также, если вам тут что то не понятно, то посмотрите наши учебники по вёрстки.
JavaScript:
Теперь перейдём к самому важному, это к коду на JS.
1 2 3 4 5 6 7 8 9 10 | // Получаем блок по ID let block = document.getElementById("block"); // Функция для перемещения блока function moveBlock(e) { // Перемешаем блок по X block.style.left = e.pageX + 'px'; // Перемешаем блок по Y block.style.top = e.pageY + 'px'; } |
В начале всё просто, тут получаем элемент блока по его ID, потом создаём функцию для перемещения блока, в ней мы просто меняем позиционирование на то, где находится курсор мыши.
Теперь самое главное, это то, как реализовать само перемещение объекта.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // Отслеживаем событие нажатия мыши block.addEventListener("mousedown", function (e) { // Отслеживаем событие перемещение мыши document.onmousemove = function(e) { // Объявляем функцию для перемещения блока moveBlock(e); } // Отслеживаем отпускание кнопки мыши block.onmouseup = function() { // Убираем отслеживание позиции мыши document.onmousemove = null; // Убираем отслеживание нажатия мыши block.onmouseup = null; } }); |
Как вы видите, тут очень маленький код, и всё очень просто, в начале начинаем отслеживать событие нажатия мыши на блок, который хотим передвинуть.
Внутри этого события, мы отслеживаем ещё два события, первое, перемещение мыши, когда мы перемещаем мышь, вместе с ней перемещается блок, это происходит за счёт изменения позиционирование, слева и сверху.
Второе событие, это отпускание кнопки мыши, внутри него отменяется отслеживание позиции мыши и нажатие мыши.
Теперь перемещение объекта на javascript готово.
Вывод:
В этой статье было показано как сделать drag’n’drop на чистом JavaScript, этот вариант кода очень простой, но думаю у вас получится его усовершенствовать.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 3,50
Загрузка...