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.