Внимание! Эта статья устарела. Новая статья по этой теме: «jQuery UI – плагин Draggable«. Давайте продолжим знакомство с элементами пользовательских интерфейсов, которые можно создавать на базе библиотеки jQuery. Попробуем создавать элементы, которые можно будет свободно перемещать по странице с помощью мыши. Вы наверняка уже встречали такие «фичи». Оказывается, с помощью jQuery сделать это самому не составляет почти никакого труда!
Опять же обратимся к сайту разработчиков библиотеки. Там приведен вот такой простой код:

$(".block").draggable();

И это почти все! В этом коде сообщается, что перемещаемыми элементами становятся все элементы с классом block. Но опять же, разработчики предлагают большой набор различных опций, с помощью которых можно извлекать какую-либо практическую пользу. Иначе зачем таскать блоки по странице? Только лишь с целью поразить пользователя? Нет конечно.
Давайте сначала посмотрим пример того, как это работает, а затем мы разберем код, который обеспечивает эту возможность. В примере задана опция возврата элемента на исходную позицию после окончания его перемещения.

Вы можете сохранить исходный код примера и при наличии у Вас библиотеки jQuery, воспроизвести его на своем сайте.

Для того, чтобы элементы действительно стали перемещаемыми, нам потребуется подключить к нашей странице, в разделе HEAD четыре файла:

<script src="js/jquery-1.2.1.js" type="text/javascript"></script>
<script src="js/ui.mouse.js" type="text/javascript"></script>
<script src="js/ui.draggable.js" type="text/javascript"></script>
<script src="js/ui.draggable.ext.js" type="text/javascript"></script>

Первым подключается библиотека jQuery, а затем – файл, выполняющий обработку событий мышки. Два следующих файла работают непосредственно над перемещением элементов по странице.
Далее в этом же разделе HEAD следует таблица стилей в которой мы определим класс (это может быть например и идентификатор) для элементов, которые хотим сделать свободно перемещаемыми.
И наконец код… Естественно, в примере используются не все возможные опции, но я думаю, что сами принципы пример может продемонстрировать неплохо.

$(document).ready(function(){
    $(".block").draggable({
        revert: true,
        drag: function(e,ui) {
            $(this).css("background-color","#E2F2E2");
            $("#position").text("Положение перемещаемого
            элемента - слева: " + ui.position.left + "px,
            а сверху: " + ui.position.top + "px");
        },
        stop: function(e,ui) {
            $(this).css("background-color", "#58AEFC");
        }
    });
});

Весь код «обернут» уже немного знакомой нам

$(document).ready(function(){
...
});

которая отслеживает момент готовности объектной модели документа (DOM).

Это чем-то похоже на событие onload, но в отличие от него разрешает выполнение javascript сразу после того, как DOM готова к работе, а не после полной загрузки страницы.

Итак, вначале мы сообщаем, что перемещаемыми элементами будут все элементы с классом block. А затем просто перечисляем те опции, которые мы хотим использовать.

revert: true указывает на то, что после окончания процесса перетаскивания, элемент должен вернуться на прежнее место.
Опция drag содержит функцию, которая будет выполняться во время самого процесса перетаскивания элемента. В этой функции мы сначала задаем свойство background-color для перетаскиваемого элемента (по-русски – меняем его цвет), а затем в элемент с идентификатором #position вставляем строку текста, в которой сообщаем текущее пололжение левого верхнего угла перетаскиваемого элемента относительно окна браузера.
В опции stop мы определяем функцию, которая выполнится в момент остановки процесса перемещения элемента и просто вернет цвет элемента к начальному.

Вот и все. Далее я привожу всего несколько опций. Полный их перечень можно найти на сайте разработчиков библиотеки jQuery.

axis – ограничивает перемещение по горизонтальной (x) или вертикальной (y) осям.
containment – ограничивает перемещение к в пределах границ указанного элемента – может быть элемент DOM, родительский элемент, документ или селектор jQuery.
effect – эффекты от начала перемещения до остановки. Возможно например FadeIn при старте и FadeOut при остановке.
opacity – прозрачность перемещаемого элемента.
revert – если истина, элемент вернется на позицию откуда было начато перемещение.
start(e,ui), drag(e,ui) и stop(e,ui) – функции, которые могут вызываться при начале, окончании или процессе перетаскивания элементов.

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal