Angular 2 Drag and Drop

Angular 2 Drag and Drop converts a normal HTML element into a draggable element. Drag and Drop feature allows us to move an element using the mouse.

angular 2 drag and drop
angular 2 drag and drop

Drag and Drop is a very useful feature on the web, we use it when we want to grab an element and place it in a new position.

live example at the end of the article

try angular 2 drag drop
try angular 2 drag drop

Let’s start our angular 2 drag and drop example.

drag and drop example
drag and drop example
  • The first step is the ng2-dragula installation:

npm install ng2-dragula dragula --save

  • The second step is the ng2-dragula setup:
  • Add the DragulaService to viewProviders of your component.
  • Add Dragula to the directives of your components.

@Component({

selector: 'angular-2-drag-and-drop',

directives: [Dragula],

viewProviders: [DragulaService],

template:`

<div>

<div class='wrapper'>

<div class='container' [dragula]='"first-bag"'>

<div>Move the HTML elements between the containers</div>

<div>You cannot move them outside the draggable containers </div>

<div>Change the position of your HTML elements inside the draggable is possible.</div>

</div>

<div class='container' [dragula]='"first-bag"'>

<div>Move the HTML elements between the containers</div>

<div>You cannot move them outside the draggable containers </div>

<div>Change the position of your HTML elements inside the draggable is possible.</div>

</div>

</div>

</div>

`

})

class Angular2DragAndDrop {}

 

 dragula directive
dragula directive

 

The dragula directive allows us to group containers together. We call this grouping: bag.


<div [dragula]='"bag-three"'></div>

<div [dragula]='"bag-three"'></div>

<div [dragula]='"bag-four"'></div>

Our component example uses typescript as programming language.

all files from here : angular 2 drag and drop

angular 2 drag and drop