Angular-DND 0.1.25
Features:
- Not jQueryUI wrapper
- Support touch events
Directives:
dnd-draggable [expression]
Provides movement ability to the element. Parameter 'false' disables the directive.
dnd-draggable-opts [object] - directive options:
- layer[string]: What would droppable elements react to draggable elements, they must be in a single layer. By default, layer = 'common'
- useAsPoint[boolean]: Droppable area will interact with the item only if the manipulator cursor will be within the droppable element
- helper[string]: 'clone' or templateUrl - allow to move to use helper, instead of the element
- handle[string]: Selector of handle element to be used for pulling element
watching attributes:
- dnd-on-dragstart [function()]: Triggered at the start of drag element
- dnd-on-drag [function()]: Triggered at the process of drag element
- dnd-on-dragend [function()]: Triggered at the end of drag element
scope:
- $dragged [boolean] - Register that lets you know whether the movement element during the last cycle of events (the last ~ 5ms). Convenient to use for example in ng-click (see. Example).
- $dropmodel [string] - Droppable element model defined in the dnd-model directive
dnd-pointer-none
Attribute operates similar to the pointer-events: none - ignoring the event, but in relation to dnd- directives (see Example 2 sortable directive - the text field)
dnd-droppable [expression]
Create targets for draggable elements. Parameter 'false' disables the directive.
dnd-droppable-opts [object]:
- layer[string]: What would droppable elements react to draggable elements, they must be in a single layer. By default, layer = 'common'
watching attributes:
- dnd-on-dragenter [function()]: Triggered when hit draggable within the droppable
- dnd-on-dragover [function()]: Triggered when an accepted draggable is dragged over the droppable
- dnd-on-dragleave [function()]: Triggered when leave draggable within the droppable
- dnd-on-drop [function()]: Triggered when an accepted draggable is dropped on the droppable
scope:
- $dragmodel [string] Draggable element model defined in the dnd-model directive
dnd-rotatable [expression]
Provides rotate ability to the element. Parameter 'false' disables the directive.
watching attributes:
- dnd-on-dragstart [function()]: Triggered at the start of element rotation
- dnd-on-drag [function()]: Triggered at the process of element rotation
- dnd-on-dragend [function()]: Triggered at the end of element rotation
scope:
- $rotated [boolean] - Register that lets you know whether the element rotation during the last cycle of events (the last ~ 5ms). Convenient to use for example in ng-click (see. Example).
dnd-resizable [expression]
Provides resize ability to the element. Parameter 'false' disables the directive.
watching attributes:
- dnd-on-dragstart [function()]: Triggered at the start of resizing element
- dnd-on-drag [function()]: Triggered at the process of resizing element
- dnd-on-dragend [function()]: Triggered at the end of resizing element
scope:
- $resized [boolean] - Register that lets you know whether the element resizing during the last cycle of events (the last ~ 5ms). Convenient to use for example in ng-click (see. Example).
dnd-sortable-list [expression]
List of sortable items
dnd-sortable [expression]
Reorder elements in a list or grid.
watching attributes:
- dnd-on-sortstart [function()]: Triggered at the start of sorting element
- dnd-on-sort [function()]: Triggered at the process of sorting element
- dnd-on-sortchange [function()]: This event is triggered during sorting, but only when the DOM position has changed
- dnd-on-sortend [function()]: Triggered at the end of sorting element
dnd-lasso-area [expression]
This Directive is to create rect models with lasso tool. Also, this directive can work with a selectable directive (as a container) (see. Example). Parameter 'false' disables the directive.
watching attributes:
- dnd-on-lassostart [function()]: Triggered at the start of lasso change size
- dnd-on-lasso [function([rect])]: Triggered at process of lasso change size
- dnd-on-lassoend [function([rect])]: Triggered at end of lasso change size
scope:
- $dragged [boolean] - Register that lets you know whether the movement leasso during the last cycle of events (the last ~ 5ms). Convenient to use for example in ng-click (see. Example).
dnd-selectable [expression]
Use manipulator to select elements, individually or in a group.
Requirements:
- dnd-lasso-area как родительский элемент
watching attributes:
- dnd-on-selected [function([$keyPressed])]: interrupt after changing selected value (dnd-model-selected) from false to true.
- dnd-on-unselected [function([$keyPressed])]: interrupt after changing selected value (dnd-model-selected) from true на false.
- dnd-on-selecting [function([$keyPressed])]: interrupt after changing selecting value (dnd-model-selecting) from false на true.
- dnd-on-unselecting [function([$keyPressed])]: interrupt after changing selecting value (dnd-model-selecting) from true на false.
model attributes:
- dnd-model-selected: varibale name of selected state
- dnd-model-selecting: varibale name of selecting state
scope:
- $keypressed - Register that indicates whether the button is pressed ctrl, shift or cmd during the event
Sequence of events:
- if click - selected(true/false).
- If not click - selecting(true) -> selected(true/false) -> selecting(false)
dnd-rect (string)
Model of element rectangle (top, left, width, height, transform). Core directive. Use with dnd-draggable, dnd-resizable, dnd-rotatable, dnd-fittext, dnd-sortable, and also dnd-selectable(optional) work with dnd-rect.
dnd-containment(string, selector)
Containment work area of draggable/resizable/rotatable elements. By default containment is body.
dnd-fittext (mix)
Directive for text fitting under element sizes.
dnd-fittext parameter:
-
Value, change which triggers resizing text. (ex: {width: rect.width, height: rect.height, text: rect.text}. see example)
-
dnd-fittext-min - min font size in px
-
dnd-fittext-max - max font size in px
Services:
DndLasso
Service-Class to provide directives interface of the rectangular lasso tool
dndKey
Service for control key pressing
Methods
- get(): get array of pressed keys
- isset(code): check key state by key code
Examples
- All examples inside demo folder
- Also available link
Plunkers
TODO:
- more options
- ensure rapid expandability options
- supporting touch specific events (rotate, resize)
- supporting dynamic options
- supporting ng-animate
- supporting HTML5 dnd events
PS:
Sorry for bad translation. Waiting for your pull requests.