В этой статье вы узнаете о том, как сделать Drag’N’Drop на JavaScript с использованием библиотеки JQuery и вы увидите, что это просто.
Также у нас есть уже статья, как это сделать, только на чистом JS, перейдите по сcылки, если интересно.
JQuery UI:
Первым делом нужно установить JQuery, но об этом посмотрите в статье Что такое JQuery и как его подключить, конечно, если вы не знаете, тут же покажу как подключить JQuery UI.
Для тех кто не знает, что это такое, грубо говоря это расширение JQuery, нужное для создание более приятного пользовательского опыта на сайте.
Что бы скачать сам JQuery UI, просто перейдите по ссылки и выберите версию, которая вам нужна, после из архива перекидываем файл «jquery-ui.js», в ваш проект.
1 | <script src="./libs/jquery-ui.js"></script> |
Создание Drag’N’Drop на JQuery:
Теперь перейдём к самому главному, это как сделать сам Drag’N’Drop, на JQuery сделать это очень просто, но для начала нужно создать какой-нибудь блок, для его передвижения.
1 | <div id="block"></div> |
Тут просто HTML и в нём создаём блок <div> с адишником «block».
1 2 3 4 5 6 | #block { width: 100px; height: 100px; background-color: red; position: absolute; } |
В CSS задаём размер и цвет, в нашем случае цвет красный.
1 | $("#block").draggable(); |
Вот это весь код, который нужно знать, что бы просто перемешать один объект на JQuery, но что делать, если нужно изменять какой нибудь объект если на него перемешаем наш объект.
Для этого нужно создать ещё один блок-контейнер, в HTML и задать ему CSS.
1 | <div id="сontainer"></div> |
Вот CSS.
1 2 3 4 5 6 7 8 9 10 11 12 | #сontainer { width: 110px; height: 110px; border: 2px black solid; position: absolute; left: 500px; z-index: 500; } .green { background-color: green; } |
Сначала мы меняем блок, задаём размер, задаём позиционирование абсолют и меняем позицию слева, ну самое главное, задали z-index. Дела в том, что если это не сделать, то когда мы будем перемешать на красный блок, он будит попадать под контейнер.
Также нужно добавить z-index блоку, и сделать значение больше чем у контейнера, я же сделал 1000.
Теперь перейдём к JavaScript.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // Задаём перемещение по нажатию мыши $("#block").draggable(); // Задаём отслеживание контейнера $("#сontainer").droppable({ // Если в контейнер попадает блок drop: function( event, ui ) { // То добавляем класс green $(this).addClass("green") }, // Если убираем блок из контейнера out: function( event, ui ) { // То удаляем класс green $(this).removeClass("green") } }); |
Это очень простой код, первым делом задаём возможность перемешать красный блок, потом задаём контейнеру отслеживание того, что в него что-то попадает.
Дальше внутри идёт две функции, первая, отвечает за то, что делать если переместили в контейнер какой то блок, в таком случае добавляем класс «green», за счёт чего меняем цвет контейнера.
Следующая функцию запускается когда убираем какой-нибудь блок, тогда происходит удаление класса «green».
Вывод:
В этой статье вы прочитали про то, как сделать Drag’N’Drop на JQuery, конечно, это ещё не всё, но для основного понимания достаточно, если вас это заинтересовала, то посмотрите вот эту документацию, там написана как делается Drag’N’Drop с помощь JQuery UI.
Подписываетесь на соц-сети:
Оценка:
Загрузка...