Showing posts with label ng-animation. Show all posts
Showing posts with label ng-animation. Show all posts
Drag and Drop for AngularJS (with Animation)

Drag and Drop for AngularJS (with Animation)

May 16, 2017

Implementing jQueryUI Drag and Drop functionality in AngularJS is easier than ever with this wrapper for jQueryUI draggable/droppable components.

How to Use

  • bower install angular-dragdrop (or sudo bower install angular-dragdrop --allow-root)
  • Reference angular-dragdrop.min.js in your application as:
  •  <script src="components/angular-dragdrop/src/angular-dragdrop.min.js"></script>  
  • Resolve the dependency in the main module of your application as:
  •  angular.module('myApp', ['ngDragDrop'])  
  • Drag anything as:
  •  <span data-drag="true" jqyoui-draggable>So you think you can drag</span>  
  • Finally, check out the cool demos
  • Note, use touchpunch.js to enable drag/drop on touch devices.

Angular Draggable options

  • jqyoui-draggable – A custom angular attribute to make any element draggable.
  • It holds more settings such as:
  • index – $index of an item of a model (if it is an array) associated with it
  • placeholder – boolean/string – If true, the place will be occupied even though a dragggable is moved/dropped somewhere else. If 'keep' is supplied, the original item won't be removed from the draggable.
  • animate – boolean – If true, draggable will be animated towards droppable when dropped. If multiple is not set to true on droppable then its draggable will swap its position.
  • onStart – string – callback method to be invoked (has to be defined in a controller) when dragging starts
  • onStop – string – callback method to be invoked when dragging stops
  • onDrag – string – callback method to be invoked while the mouse is moved during the dragging
  • applyFilter - string - applies AngularJS $filter on the list before swapping items. Only applicable, if ngRepeat has any filter (such as orderBy, limitTo) associated with it.
  • containment – string - position/offset. Offset by default. This forces to use jQuery.position() or jQuery.offset() to calculate proper position with respect to parent element or document respectively.
  • deepCopy - boolean (optional) – If true, makes a deep copy of draggable that looses prototypical inheritance.
  • beforeDrop – promise (optional) – Ask for confirmation before swapping. Works with both window.confirm and custom popup.
  • insertInline – boolean(optional) – Make a list sortable. Same model is mandatory for draggable and droppable.
  • direction – string(optional) – Property name that will be created on each scope to manage animation direction.
  • data-drag – boolean – If true, element can be draggable. Disabled otherwise.
  • data-jqyoui-options – object – should hold all the valid options supported by jQueryUI Draggable
  • ng-model – string – An angular model defined in a controller. Should be a JS array or object


Demo is here


If you're having problems with using the project, use the support forum at CodersClan.

Note: Special thanks to Amit Gharat
Contact -

Disclaimer: The blog is created to share angular directives information to geek angular developers