Stopbyte

Angular 2 + drag and drop

Web Development Node.Js
#1

I am try adding drag and drop for my project.
but i did not find work example.
I try used ng2-drag-drop and ng2-dragula,
but it module does not work.
i want advice what kind of module used in angular 2 for drag and drop.

1 Like
#2

Here is a nice Drag & Drop Library for Lists on angular:

hope that one works for you :stuck_out_tongue:

#3

Thanks, but it project work on Angular, but not on Angular 2

#4

Yep true @ivan.norin I didn’t notice: so here are some Angular 2 Drag & Drop Libraries alongside some samples:

Example Code snippet (taken from the GitHub Repository)

import {Component} from '@angular/core';

@Component({
    selector: 'app',
    template: `
<h4>Simple Drag-and-Drop</h4>
<div class="row">
    <div class="col-sm-3">
        <div class="panel panel-success">
            <div class="panel-heading">Available to drag</div>
            <div class="panel-body">
                <div class="panel panel-default" dnd-draggable [dragEnabled]="true">
                    <div class="panel-body">
                        <div>Drag Me</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div dnd-droppable class="panel panel-info">
            <div class="panel-heading">Place to drop</div>
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div dnd-droppable class="panel panel-warning">
            <div class="panel-heading">Restricted to drop</div>
            <div class="panel-body">
            </div>
        </div>
    </div>
</div>
`
})
export class AppComponent { }

hope that helps :wink: