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

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

                                        
                                        
                                        
                                    

  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 Происходит в момент отпускания кнопки мыши в процессе перетаскивания