Drag’n’Drop на JavaScript

Метки: /

В этой статье будет рассказываться как сделать drag’n’drop на чистом JavaScript, или если на русском, то перемещение элементов.

HTML и CSS:

Сперва, нам нужно создать в объект для перемещение и задать ему нужные стили.

Тут просто добавляем в HTML, <div> элемент с ID block.

Здесь мы задаём блоку сначала ширину и высоту, потом цвет, и самое главное задаём позиционирование absolute, вот результат.

Благодаря такому позиционированию, мы сможем спокойно перемешать объект куда нам надо.

Также, если вам тут что то не понятно, то посмотрите наши учебники по вёрстки.

JavaScript:

Теперь перейдём к самому важному, это к коду на JS.

В начале всё просто, тут получаем элемент блока по его ID, потом создаём функцию для перемещения блока, в ней мы просто меняем позиционирование на то, где находится курсор мыши.

Теперь самое главное, это то,  как реализовать само перемещение объекта.

Как вы видите, тут очень маленький код, и всё очень просто, в начале начинаем отслеживать событие нажатия мыши на блок, который хотим передвинуть.

Внутри этого события, мы отслеживаем ещё два события, первое, перемещение мыши, когда мы перемещаем мышь, вместе с ней перемещается блок, это происходит за счёт изменения позиционирование, слева и сверху.

Второе событие, это отпускание кнопки мыши, внутри него отменяется отслеживание позиции мыши и нажатие мыши.

Теперь перемещение объекта на javascript готово.

Вывод:

В этой статье было показано как сделать drag’n’drop на чистом JavaScript, этот вариант кода очень простой, но думаю у вас получится его усовершенствовать.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: