От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы познакомимся с плагином Draggable библиотеки jQuery UI, который позволяет сделать элемент страницы перемещаемым, т.е. мы можем перетаскивать его по странице или в пределах некоего контейнера.
Плагин Draggable, как и рассмотренный в одной из предыдущих статей плагин Sortable, — это также одно из очень эффектных предложений от библиотеки jQuery UI. Данный плагин можно использовать, к примеру, вместе с указанным плагином сортировки, добавляя новые пункты меню в контейнер. Также можно встретить использование плагина перетаскивания элементов в интернет-магазинах, когда для того, чтобы добавить товар в корзину, его нужно перетащить мышкой в эту самую корзину.
В общем, сфера использования плагина Draggable ограничена лишь вашей фантазией. Давайте реализуем простейший пример перетаскивания элемента, используя API плагина. Как обычно, нам потребуется некоторая разметка, в данном случае это должен быть элемент для перетаскивания. Пусть это будет обычный блок div:
|
1 2 3 |
<div class="draggable"> <p>Это перетаскиваемый блок.</p> </div> |
Осталось вызвать метод draggable() для элемента с одноименным классом:
|
1 2 3 |
$(function(){ $('.draggable').draggable(); }); |
Собственно, все, можно проверять результат. Теперь блок можно свободно перемещать курсором мыши по странице.
Сейчас блок можно перетаскивать по странице в любом направлении. Если нам нужно ограничить перетаскивание только по оси X или Y, тогда для этого можно воспользоваться соответствующей опцией. Например, разрешим перетаскивать блок только по оси X:
|
1 2 3 4 5 |
$(function(){ $('.draggable').draggable({ axis: "x" }); }); |
Как видите, все достаточно просто, как и прочие плагины библиотеки jQuery UI. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
Комментарии (1)