Как создать свой сайт → Уроки jQuery → Урок 10. Плагин draggable

jQuery - Урок 10. Плагин draggable - перетаскиваем элементы

Сегодня мы начнем знакомиться с набором официальных плагинов jQuery - jQuery UI. Для работы с набором этих плагинов нам понадобится файл ui.core.js. На официальном сайте по адресу http://jqueryui.com можно скачать полный файл (если отметить все галочки, т.е. выбрать все плагины), не забудьте выбрать версию используемой вами библиотеки. А можно выбрать лишь необходимый плагин (оставив галочку только напротив него, тогда файл будет весить меньше).

Для дальнейшей работы давайте сходим по вышеуказанному адресу, выберем версию jquery - 1.3.2, отметим все галочки и нажмем на кнопку Download. В реальной жизни лучше оставить галочку только напротив интересующего вас плагина, но мы будем рассматривать все, поэтому нам и удобнее скачать полный файл.

Разархивируйте то, что скачали в папку, в которой у вас находятся страницы index.html, style.css и script.js. Из вновь появившихся папок нас интересует та, в которой лежат файлы jquery-1.3.2.min.js и jquery-ui-1.7.2.custom.min.js. (Если вы выбрали другую версию jquery, то и версия jquery ui у вас будет отличаться). В моем случае это папка js.

Подключим эти файлы к нашей html-странице:
<html> <head> <title>jQuery плагин draggable</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body></body> </html>
Остальные файлы и папки мы будем подключать в дальнейшем по мере необходимости.

Плагин Draggable

Этот плагин позволяет перетаскивать элементы страницы с помощью мыши. Например, вот так:
Перетащи меня


Код html-страницы:
<html> <head> <title>jQuery плагин draggable</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="les10_ex1">Перетащи меня</div> </body> </html>
Стиль div-у придайте сами, а вот на странице script.js необходимо указать, что этот div будет перемещаемым:
$(document).ready(init); function init(){ $("#les10_ex1").draggable(); }
Вот так все просто. Перемещение элемента можно настраивать, для это существует ряд параметров. Например:
  • axis - ограничивает перетаскивание элемента либо по горизонтали (x) либо по вертикали (y) оси координат.

    Пример:
    $(document).ready(init); function init(){ $("#les10_ex2").draggable({ axis:'x' }); }
    Перетащи меня
    Теперь div можно перетаскивать только по горизонтали.


  • containment - ограничивает область перетаскивания. Возможные значения: parent (родительский элемент), document (текущий документ), window (окно), [x1, y1, x2, y2] - координаты левого верхнего и правого нижнего угла допустимой области.

    Пример:
    $(document).ready(init); function init(){ $("#les10_ex3").draggable({ containment:'parent' }); }
    Перетащи меня
    Теперь div можно перетаскивать только в пределах родительского элемента (в пределах рамки).


  • cursor - определяет вид курсора при перетаскивании.

    Пример:
    $(document).ready(init); function init(){ $("#les10_ex4").draggable({ cursor: 'crosshair' }); }
    Перетащи меня
    Теперь при перетаскивании курсор принимает вид перекрестья в виде прицела. Другие возможные значения:
    - e-resize - двунаправленная горизонтальная стрелка,
    - n-resize - двунаправленная вертикальная стрелка,
    - ne-resize - двунаправленная диагональная стрелка (из левого нижнего угла в верхний правый угол),
    - nw-resize - двунаправленная диагональная стрелка (из правого нижнего угла в верхний левый угол),
    - move - перекрестье из четырёх стрелок,
    - text - обычный текстовый курсор,
    - wait - песочные часы Windows.


  • delay - определяет время в миллисекундах, по истечении которого, начнется перетаскивание (полезно для предотвращения случайного перетаскивания).

    Пример:
    $(document).ready(init); function init(){ $("#les10_ex5").draggable({ delay: 2000 }); }
    Перетащи меня
    Теперь перетаскивание будет начинаться через 2 секунды после нажатия и удержания левой кнопки мыши.


  • distance - определяет расстояние в пикселах, которое указатель мыши должен пройти после того, как вы нажали на кнопку мыши, прежде чем начнется перетаскивание (так же, как и предыдущий параметр полезен для предотвращения случайного перетаскивания).

    Пример:
    $(document).ready(init); function init(){ $("#les10_ex6").draggable({ distance: 50 }); }
    Перетащи меня
    Теперь перетаскивание будет начинаться только после того, как указатель мыши пройдет 50 пикселов, причем неважно в какую сторону.


  • handle - определяет, за какой элемент внутри данного осуществляется перетаскивание.

    Пример:
    $(document).ready(init); function init(){ $("#les10_ex7").draggable({ handle: 'p' }); }

    Перетащи меня

    Теперь перетаскивать div можно только, ухватив за абзац (за текст).


  • revert - определяет, будет ли элемент возвращен на свое место после перетаскивания (true - да).

    Пример:
    $(document).ready(init); function init(){ $("#les10_ex8").draggable({ revert: true }); }

    Перетащи меня

    Теперь после перетаскивания div будет возвращаться на свое место.


  • revertDuration - определяет, за какое время элемент будет возвращен на свое место после перетаскивания (если предыдущий параметр определен, как true).

    Пример:
    $(document).ready(init); function init(){ $("#les10_ex9").draggable({ revert: true, revertDuration: 3000 }); }

    Перетащи меня

    Теперь после перетаскивания div будет возвращаться на свое место за 3 секунды.


  • zIndex - определяет значение свойства z-index (номер слоя) перемещаемого элемента.

    Пример:
    $(document).ready(init); function init(){ $("#les10_ex10").draggable({ zIndex: 1 }); $("#les10_ex11").draggable({ zIndex: 2 }); $("#les10_ex12").draggable({ zIndex: 3 }); }
    z-index: 1
    z-index: 2
    z-index: 3
    Теперь в какой бы последовательности мы не перетаскивали наши div-ы, они всегда будут располагаться соответственно своим слоям (самый верхний 3, под ним 2, в самом низу 1).


А сейчас мы рассмотрим три параметра, связанных с событиями:
  • start - событие наступает с началом перемещения.


  • drag - событие происходит в течение всего времени перемещения.


  • stop - событие наступает при завершении перемещения.


При использовании любого из этих параметров мы должны определить функцию, которая принимает два аргумента – event (объект события) и ui (специальный объект, содержащий информацию о положении перемещаемого объекта).

Используя свойства этих аргументов, можно узнать координаты объекта в любой момент при перемещении и после него. Например:

Html-код примера:
<html> <head> <title>jQuery плагин draggable</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="les10_ex13"></div> <textarea cols="70" rows="3" wrap="off" id="res"></textarea> </body> </html>
Функция:
$(document).ready(init); function init(){ start: function(event, ui) { var a=event.type; $('#res').text('Событие: '+a); }, stop: function(event, ui) { var a=event.type; var c=ui.position.left; var d=ui.position.top; var e=ui.offset.left; var f=ui.offset.top; $('#res').text('Событие: '+a+ '\nРасстояние слева и сверху относительно родительского элемента: '+c+' '+d+ '\nАбсолютные значения расстояния слева и сверху: '+e+' '+f); } }
Всего у плагина draggable более 20 различных параметров, полный перечень можете посмотреть, например, здесь.

У плагина draggable есть четыре метода, которые позволяют менять работу плагина после его инициализации:
  • destroy - удаляет всю функциональность плагина Draggable.

    Пример:
    $("#les").draggable(‘destroy’);


  • disable - временно запрещает работу всей функциональности плагина Draggable.

    Пример:
    $("#les").draggable(‘disable’);


  • enable - разрешает работу всей функциональности плагина Draggable (если она была запрещена).

    Пример:
    $("#les").draggable(‘enable’);


  • option - позволяет установить значения параметров плагина после его инициализации.

    Запись:
    $("#les").draggable(‘option’, optionName, [value]);


Посмотрим на примере:


Html-код примера:
<html> <head> <title>jQuery плагин draggable</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="les10_ex14"></div> <input type="button" value="Метод option" id="metOpt"> <input type="button" value="Метод disable" id="metDis"> <input type="button" value="Метод enable" id="metEn"> </body> </html>
Функция:
$(document).ready(init); function init(){ $("#les10_ex14").draggable({ revert: true, cursor: 'crosshair' }); $("#metOpt").click(function(){ $("#les10_ex14").draggable("option", "revertDuration", [5000]); }); $("#metDis").click(function(){ $("#les10_ex14").draggable("disable"); }); $("#metEn").click(function(){ $("#les10_ex14").draggable("enable"); }); }
На этом все, мы достаточно уделили время плагину Draggable. В следующий раз мы познакомимся с плагином Droppable, который позволяет перемещаемые элементы сбрасывать в какой-либо другой элемент (самый распространенный пример - корзина).



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.