Библиотека jQuery UI. Плагин Draggable

Библиотека jQuery UI. Плагин Draggable

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы познакомимся с плагином Draggable библиотеки jQuery UI, который позволяет сделать элемент страницы перемещаемым, т.е. мы можем перетаскивать его по странице или в пределах некоего контейнера.

Плагин Draggable, как и рассмотренный в одной из предыдущих статей плагин Sortable, — это также одно из очень эффектных предложений от библиотеки jQuery UI. Данный плагин можно использовать, к примеру, вместе с указанным плагином сортировки, добавляя новые пункты меню в контейнер. Также можно встретить использование плагина перетаскивания элементов в интернет-магазинах, когда для того, чтобы добавить товар в корзину, его нужно перетащить мышкой в эту самую корзину.

В общем, сфера использования плагина Draggable ограничена лишь вашей фантазией. Давайте реализуем простейший пример перетаскивания элемента, используя API плагина. Как обычно, нам потребуется некоторая разметка, в данном случае это должен быть элемент для перетаскивания. Пусть это будет обычный блок div:

<div class="draggable">
 <p>Это перетаскиваемый блок.</p>
</div>

Библиотека jQuery UI. Плагин Draggable

Осталось вызвать метод draggable() для элемента с одноименным классом:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
$(function(){
 $('.draggable').draggable();
});

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

Сейчас блок можно перетаскивать по странице в любом направлении. Если нам нужно ограничить перетаскивание только по оси X или Y, тогда для этого можно воспользоваться соответствующей опцией. Например, разрешим перетаскивать блок только по оси X:

$(function(){
 $('.draggable').draggable({
  axis: "x"
 });
});

Как видите, все достаточно просто, как и прочие плагины библиотеки jQuery UI. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree