Angular-dnd-module NPM

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:

layerstring: What would droppable elements react to draggable elements, they must be in a single layer. By default, layer = 'common'
useAsPointboolean: Droppable area will interact with the item only if the manipulator cursor will be within the droppable element
helperstring: 'clone' or templateUrl - allow to move to use helper, instead of the element
handlestring: 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:

layerstring: 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