Всем привет. Мой первый пост на хабре — не судите строго.
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
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