Angularjs Drag and Drop Customizable

Angularjs Drag and Drop Customizable

Angularjs Drag and Drop Customizable :: In this post we will show how to cerate Customizable drag and drop behaviour for Angularjs. Hear we will give you code and demo of Angularjs Drag and Drop Customizable.

View DemoGit Code

Angularjs Drag and Drop Bower ::

bower install angular-drag-and-drop-directives 

Or download the files from github, then:

Angularjs Drag and Drop HTML ::

• Add angular-drag-and-drop.css
• Add angular-drag-and-drop.js
• Add required markup

  <drag-and-drop>
  <drag-item>
  <p>Add Anything in here</p>
  <p>will be draggable</p>
  </drag-item>
  <drop-spot>
  <p>Drop Here</p>
  </drop-spot>
  </drag-and-drop>
  

In your Angular module:

Include "laneolson.ui.dragdrop" as a reliance to the module.

In your controller, include capacities for taking care of different occasions in the intuitive.

how to Angularjs Drag and Drop Customizing ??

Qualities by Directive for Angularjs Drag and Drop

You can pass different capacities and choices to the order by doling out the accompanying qualities:

drag-and-drop – component or quality

• on-thing removed: work – terminated when and thing is expelled from its drop spot
• on-drag-start: work – let go when a thing begins being dragged
• enable-swap: boolean – a thing will be swapped out while dropping a drag thing on to a drop detect that has achieved its most extreme number of items
• fixed-positions: boolean - when set to genuine, things come back to their begin positions when dropped outside of a drop spot
• on-drag-end: work - let go when a thing is released
• on-drag-enter: work - let go when a thing is dragged over a drop spot
• on-thing placed: work - terminated when a thing is dropped within a drop spot
• on-drag-leave: work - terminated when a thing is dragged outside of a drop spot

drag-item - component or trait for Angularjs Drag and Drop

• clone : boolean - a clone thing is dragged rather than the first item
• drag-data: protest - use to relate any extra information you may need for the draggable item.
• drag-id: an identifier that is utilized for this drag thing. Whenever set, the drag-thing component will have a class that matches the drag-id.
• x: int - the pixel x counterbalance of the drag thing from it's unique position
• y: int - the pixel y counterbalance of the drag thing from it's unique position
• lock-vertical: boolean - locks the thing so it might just be moved left and right
• drop-to: string - used to position the component inside the drop spot (e.g. "top", or "base left")

drop-spot - component or quality for Angularjs Drag and Drop

• max-items: int - Used to determine the most extreme number of things permitted in this drop spot
• drop-id: string - an identifier that is utilized for this drop thing. Whenever set, the drop-spot component will have a class that matches the drag-id.

Classes for Angularjs Drag and Drop

The accompanying classes are added to components to permit styling in light of the present state for Angularjs Drag and Drop

• : added to a drag-thing component if the drag-id quality is set
• dragging: Added to the intuitive wrapper when a thing is being dragged.
• drop-full: Added to a drop-spot when it has achieved its most extreme number of things (allocated through max-items)
• : added to a drop-spot component if the drop-id quality is set. A drag-thing component will be given the class
• in- when it is set inside that drop spot.
• drag-active: added to a drag-thing component when it is being dragged
• drop-hovering: Added to a drop-spot component when a thing has been dragged over top of the drop spot.