/angular-dnd

Drag and Drop module for Super heroic AngularJS. No jQueryUI. Touch supporting.

Primary LanguageJavaScript

Angular-DND 0.1.14

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 [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 BEFORE changing selected value (dnd-model-selected) from false to true. In case if function return false the value will remain the same.
  • dnd-on-unselected [function([$keyPressed])]: interrupt BEFORE changing selected value (dnd-model-selected) c true на false. In case if function return false the value will remain the same.
  • dnd-on-selecting [function([$keyPressed])]: interrupt BEFORE changing selecting value (dnd-model-selecting) c false на true. In case if function return false the value will remain the same.
  • dnd-on-unselecting [function([$keyPressed])]: interrupt BEFORE changing selecting value (dnd-model-selecting) c true на false. In case if function return false the value will remain the same.

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.