Разработка функционала передвижения всплывающего окна | REDs Group
REDS Group
ул. Большая Академическая, дом 5, стр. 1, Москва.
Разработка функционала передвижения всплывающего окна

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

65

Очень часто в целях разработки красивого веб-сайта приходится сталкиваться с разработкой функционала передвижения всплывающего окна. В связи с этим было принято решение найти простой и универсальный способ реализации. С разработкой поможет библиотека 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 Происходит в момент отпускания кнопки мыши в процессе перетаскивания

24.05.2018 / Садовиков Сергей
Комментарии (0)