AngularJS Drag and Drop module. Without jQueryUI

Hello. My first post on a habr - do not judge strictly.

Drag and drop in AngularJS has never been supported at the native level, all that is available now is jQueryUI wrappers.
HTML5 DragAndDrop doesn't count - I'm talking about front-end solutions. Draggable, droppable, rotatable, resizable elements - these are its components.

For some time I thought about this problem and decided to make my small contribution to the piggy bank of the super heroic AngularJS community.
Without further ado and not thinking about the name for a long time, I present my brainchild: AngularDND .

Link to demo:
Link to github:

Features of version 0.1.0:

  • Non jQueryUI wrapper
  • Touch event support


  • dnd-draggable Provides the ability to move an element
  • dnd-droppable Defines a droppable element that will respond to draggable elements
  • dnd-rotatable Provides the ability to rotate an element
  • dnd-resizable Provides the ability to resize an element
  • dnd-rect Directive, which is a model of an element that describes its coordinates and sizes (default 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 a model of a draggable / droppable object (see examples)
  • dnd-lasso-area Directive designed to create rect models using the lasso tool (see example)
  • dnd-selectable Directive to select objects. As a selection tool, lasso is used (see example)
  • dnd-fittext Excellent directive for fitting text to the block size (convenient with resizable elements) in which this text is located. the function takes a rect object as the only argument, containing a rectangle. Based on these parameters, the font height is calculated. The directive also supports additional configuration attributes: dnd-fittext-max and dnd-fittext-min, which allow you to set the maximum and minimum font values ​​in pixels, respectively.


  • DndLasso A service class designed to provide directives for the interface to the rectangular lasso tool of the same name

jQuery extensions:

  • jQuery.fn.dndBind The main function that allows you to organize an interface for interacting with drag and drop events. It works on the principle of jQuery.fn.bind
  • jQuery.fn.dndUnbind Works on the principle of jQuery.fn.Unbind


  • translate docs to english

Also popular now: