AngularJS Drag and Drop модуль. Без jQueryUI

Всем привет. Мой первый пост на хабре — не судите строго.

Drag and drop в AngularJS никогда не поддерживался на нативном уровне, все что сейчас есть это обертки для jQueryUI.
HTML5 DragAndDrop не в счет — я говорю об интерфейсных решениях. Draggable, droppable, rotatable, resizable элементы — это его состовляющие.

В течение некоторого времени я обдумывал эту проблему и решил внести свой небольшой вклад в копилку супер героического AngularJS сообщества.
Без лишних слов и не долго обдумывая название, представляю свое детище: AngularDND.

Ссылка на demo: urplanet.net/angular-dnd/demo/basic.html
Ссылка на github: github.com/Tuch/angular-dnd

Особенности версии 0.1.0:


  • Не jQueryUI обертка
  • Поддержка touch событий


Директивы:


  • dnd-draggable Обеспечивает возможность перемещения элемента
  • dnd-droppable Позволяет определить droppable-элемент, который будет реагировать на draggable-элементы
  • dnd-rotatable Обеспечивает возможность вращения элемента
  • dnd-resizable Обеспечивает возможность изменения размеров элемента
  • dnd-rect Директива, которая представляет собой модель элемента, описывающую его координаты и размеры (по умолчанию это top, left, width, height). Директивы dnd-draggable, dnd-resizable, dnd-rotatable, dnd-fittext а также dnd-selectable работают в связке с dnd-rect.
  • dnd-model Директива, которая содержит в себе модель draggable/droppable объекта (см. примеры)
  • dnd-lasso-area Директива, предназначенная для создания rect моделей с помощью инструмента lasso (см. пример)
  • dnd-selectable Директива, позволяющая выделять объекты. Как инструмент выделения используется lasso (см. пример)
  • dnd-fittext Отличная директива для подгонки текста под размер блока (удобно с resizable элементами), в котором этот текст находится. за единственный аргумент функция принимает объект rect, содержащий в себе На основе этих параметров идет расчет высоты шрифта. Также директва поддерживает дополнительные атрибуты-настройки: dnd-fittext-max и dnd-fittext-min, которые позволяют задать максимальное и минимальное соответственно значения шрифта в пикселях.


Сервисы:


  • DndLasso Сервис-класс, предназначенный для обеспечения директивам интерфейса к одноименному инструменту прямоугольного lasso


jQuery расширения:


  • jQuery.fn.dndBind Основная функция, которая позволяет организовать интерфейс взаимодействия с drag and drop событиями. Работает по принципу jQuery.fn.bind
  • jQuery.fn.dndUnbind Работает по принципу jQuery.fn.Unbind


TODO:


  • translate docs to english
Поделиться публикацией

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 10

    0
    Всем привет. Мой первый пост на хабре — не судите строго.

    Покуда демо-страница не доступна (вероятно, слегла от хабраэффекта), крайне рекомендую использовать Github pages

      0

      Самое забавное, что в README.md есть ссылка как раз на демо, расположенное на github.io
      И примеры на плюнкере. Очень всё странно.

        0
        Статью написал года 2 назад, только сейчас получил апрув… Уже забросил проект) Иногда какие-то мелкие изменения вношу…
        0
        Эм… Пост с пингом в два года?
          0
          Именно так, но спасибо за инвайт)
          0
          Класс!
          В демо и документации не нашел возможности прокрутки родительского блока если тащить на границу.
          Такой функционал возможен?
            0
            Есть также Angular-drag-and-drop-list который использует нативный HTML5 drag and drop API. Ее гибкость позволяет настраивать под себя
              0
              А чем плох такой Drag n Drop?
              marceljuenemann angular-drag-and-drop-lists
                0
                Сегодня я бы тоже выбрал именно его. Хотя в моей версии есть специфические функции типа лассо. Спасибо.
                  0
                  Да видел, а еще rotate и всякие другие прикольные фичи)

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

              Самое читаемое