Drag’N’Drop на JQuery

Drag'N'Drop JQuery
Метки: / /

В этой статье вы узнаете о том, как сделать Drag’N’Drop на JavaScript с использованием библиотеки JQuery и вы увидите, что это просто.

Также у нас есть уже статья, как это сделать, только на чистом JS, перейдите по сcылки, если интересно.

JQuery UI:

Первым делом нужно установить JQuery, но об этом посмотрите в статье Что такое JQuery и как его подключить, конечно, если вы не знаете, тут же покажу как подключить JQuery UI.

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

Что бы скачать сам JQuery UI, просто перейдите по ссылки и выберите версию, которая вам нужна, после из архива перекидываем файл «jquery-ui.js», в ваш проект.

Создание Drag’N’Drop на JQuery:

Теперь перейдём к самому главному, это как сделать сам Drag’N’Drop, на JQuery сделать это очень просто, но для начала нужно создать какой-нибудь блок, для его передвижения.

Тут просто HTML и в нём создаём блок <div>  с адишником «block».

В CSS задаём размер и цвет, в нашем случае цвет красный.

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

Для этого нужно создать ещё один блок-контейнер, в HTML и задать ему CSS.

Вот CSS.

Сначала мы меняем блок, задаём размер, задаём позиционирование абсолют и меняем позицию слева, ну самое главное, задали z-index. Дела в том, что если это не сделать, то когда мы будем перемешать на красный блок, он будит попадать под контейнер.

Также нужно добавить z-index блоку, и сделать значение больше чем у контейнера, я же сделал 1000.

Теперь перейдём к JavaScript.

Это очень простой код, первым делом задаём возможность перемешать красный блок, потом задаём контейнеру отслеживание того, что в него что-то попадает.

Дальше внутри идёт две функции, первая, отвечает за то, что делать если переместили в контейнер какой то блок, в таком случае добавляем класс «green», за счёт чего меняем цвет контейнера.

Следующая функцию запускается когда убираем какой-нибудь блок, тогда происходит удаление класса «green».

Результат Drag'N'Drop на JQuery

Вывод:

В этой статье вы прочитали про то, как сделать Drag’N’Drop на JQuery, конечно, это ещё не всё, но для основного понимания достаточно, если вас это заинтересовала, то посмотрите вот эту документацию, там написана как делается Drag’N’Drop с помощь JQuery UI.

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

Оценка:

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

Поделится: