How to implement drag and drop using angular 2 (v2.0.0-beta.15)

Question

I want to implement a simple drag n drop list in angular, for example a groceries list that I can change its order.

Iv implemented it before using https://github.com/akserg/ng2-dnd but my problem is that I use angular 2.0.0-beta.15 and I can't currently upgrade it so I have to find something that supports this version. Iv tried to look for specific commits of this library and nothing that fits my ver. I need that exact behaviour. the more specific example of this library is . Maybe someone know somehow that I can do it by myself even, anyway will be good, prefer some library to save time.

(im using typescript)

if there someone that have some other solution in other way for reordering a list and can give an example that will be blessed too.

Answer 1

There are two most common ways to allow drag and drop using Angular 2. First is using one of Angular based open source libraries (there are several); and second is using jQuery UI library for drag and drop. After some investigation I found that most of them are made for Angular 1.x and still not support all features I needed.

So I've decided to make my implementation of drag and drop using jQuery using its TypeScript libraries.

To support drag & drop start with getting jQuery JavaScript files into my project and index.html file. After getting jQuery files before using in Angular + TypeScript project it requires jquery.d.ts and jqueryui.d.ts which will give type specific implementation for drag and drop.

Step 1

Execute following commands on root directory of project:

// install tsd
npm install tsd -g
// install jquery.d.ts
tsd install jquery --save
// install jqueryui.d.ts
tds install jqueryui --save

Above commands will install type specific mapping for jQuery into typing folder of the project as shown here.

Step 2

Drag and drop has two aspects for implementation:

• some container which allows component to be dropped inside droppable container
• component which will be allowed to drag draggable component

In my implementation, board square is droppable where pieces can be dropped and pieces are draggable which can be dragged between two squared. In order to support this make existing square (html template) add CSS class droppable-square, which will be used later to make square droppable. And add CSS class draggable-piece to make chess piece draggable.

<div *ngFor="let files of Board.Files, let i = index">
  <div class="board-square droppable-square" *ngFor="let rank of Board.Ranks, let j = index" [style.background]="Board.Squares[7-i][j].IsWhite ? '#FECE9E': 'D18B46'">
    <span class="square-name">{{Board.Squares[7-i][j].SquareId}}</span>
    <div *ngIf="Board.Squares[7-i][j].Piece" class="piece draggable-piece"></div>
  </div>
</div>

Step 3

For implementation of draggable and droppable, created new class named PieceMover which has logic to make pieces movable. As shown in following code base it makes above CSS classes draggable & droppable, and places restrictions on only allowing piece to be dropped on square and not outside of square. There is few additional logic to show boarder during drag-drop process on which pieces hover over.

Dependency Injection – Angular 2

Dependency Injection is one of most valuable feature of Angular 2. As any rich server side development languages such as C#, Java allows to have IoC container to support Dependency Injection, similarly Angular 2 allows DI. Dependency Injection allows to decoupling dependencies between classes and support modular development. As visible in PieceMover class code above the class is decorated with @Injectable(), which indicates to DI container of Angular 2 that this class could be injected. Notice as well the Injectable import in first line of PieceMover class code.

The consumer class which is BoardComponent in this case uses "providers" array to specific dependencies which are required to be resolved by Angular 2 DI container. The constructor takes parameter of type PieceMover which will be injected/resolved by DI. After resolving dependencies as mentioned above, after showing board BoardComponent calls method MakePiecesMovable() method, which makes pieces move onto chess squares.

UPD: If you do not make a deal with custom implementation you can use some libraries from this list:

• ng2-draggable
• ng2-dragula

Answer 2

You can use a specific revision from Dragula 2 Github repo.

1 - Open up package.json and scroll to "dependencies"

2 - Edit the ng2-dragula package to the Github link with the last commit before they switched to RC.1

"ng2-dragula": "git://github.com/valor-software/ng2-dragula.git#0cdcd52b1a486609ed4b4a43465b1dac2bb1b007"

3 - Delete the ng2-dragula folder in node_modules and reinstall it from your package.json with

npm install