Hello. My first post on Habré - do not judge strictly.
Drag and drop in AngularJS has never been supported at the native level, all that is now is wrappers for jQueryUI. HTML5 DragAndDrop does not count - I'm talking about interface solutions. Draggable, droppable, rotatable, resizable elements are its components.
For some time I thought about this problem and decided to make a small contribution to the piggy bank of the super heroic AngularJS community. Without further ado and not long thinking about the name, I present my brainchild: AngularDND . Link to demo: urplanet.net/angular-dnd/demo/basic.html Link to github: github.com/Tuch/angular-dnd ')
Features of version 0.1.0:
Not jQueryUI wrapper
Support for touch events
Directives:
dnd-draggable Provides the ability to move an item.
dnd-droppable Allows you to define a droppable element that will react to draggable elements.
dnd-rotatable Provides the ability to rotate the element
dnd-resizable Provides the ability to resize an item
dnd-rect Directive, which is a model of an element that describes its coordinates and dimensions (by default, it is top, left, width, height). The dnd-draggable, dnd-resizable, dnd-rotatable, dnd-fittext and dnd-selectable directives work in conjunction with dnd-rect.
dnd-model Directive that contains the model of a draggable / droppable object (see examples)
dnd-lasso-area Directive for creating rect models using the lasso tool (see example)
dnd-selectable Directive to select objects. As selection tool lasso is used (see example)
dnd-fittext Excellent directive to fit text to block size (conveniently with resizable elements) in which this text is located. for a single argument, the function accepts a rect object containing itself. Based on these parameters, the font height is calculated. Also, the directive supports additional attribute settings: dnd-fittext-max and dnd-fittext-min, which allow you to set the maximum and minimum, respectively, font values in pixels.
Services:
DndLasso A service class designed to provide interface directives to a rectangular tool of the same name lasso
jQuery extensions:
jQuery.fn.dndBind The main function that allows you to organize the interface for interacting with drag and drop events. Works on the principle of jQuery.fn.bind
jQuery.fn.dndUnbind Works on the jQuery.fn.Unbind principle.