Разработка функционала передвижения всплывающего окна

Очень часто в целях разработки красивого веб-сайта приходится сталкиваться с разработкой функционала передвижения всплывающего окна. В связи с этим было принято решение найти простой и универсальный способ реализации. С разработкой поможет библиотека Draggable (основные её возможности представлены ниже).

1. Для обеспечения работы функций библиотеки Draggable необходимо подключить следующие библиотеки:
   
   
2. Простой пример вызова функции

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

   Пример
   x

   Я могу двигаться!
   
   
   
3. Существует множество опций настройки для взаимодействия Draggable.

   Наиболее часто используемые свойства, приведены в таблице ниже:

   Свойство	Описание
   axis	Отвечает за ограничение перемещения элемента по осям(X,Y), по умолчанию значение стоит – false.
   containment	Ограничивает местоположение перемещаемого элемента. По умолчанию значение – false.
   delay	Определяет время, в течении которого должно осуществится перетаскивание элемента. Значение по умолчанию – 0.
   distance	Определяет расстояние, на которое пользователь должен переместить элемент из его начальной позиции, прежде чем он действительно переместится. Значение по умолчанию – 1px
   grid	Осуществляет принудительную привязку перемещаемого элемента к ячейкам сетки. Значение по умолчанию – false, оно означает отсутствие привязки.

   Полный список опций можно посмотреть тут http://slyweb.ru/jquerydoc/draggable-options.php

   
   
4. Пример ограничения направления перемещения:

   
   
   // или
   
   
   

   
   
5. Пример ограничения доступной области элемента
   
   
6. Задержка перемещения пример
   
   
7. Методы взаимодействия с Draggable:

   Метод	Описание
   Draggable("destroy")	Полностью удаляет функциональность взаимодействия Draggable из элемента
   Draggable("disable")	Временно отключает функциональность взаимодействия Draggable для базового элемента
   Draggable("enable")	Включает ранее отключенную функциональность для базового элемента
   Draggable("option")	Позволяет получить или изменить значение одной или нескольких опций

   
   
8. События взаимодействия с Draggable

   Событие	Описание
   create	Происходит в момент применения взаимодействия Draggable к элементу
   start	Происходит в момент начала перетаскивания
   drag	Происходит при каждом перемещении мыши в процессе перетаскивания элемента
   stop	Происходит в момент отпускания кнопки мыши в процессе перетаскивания