Questions tagged [ng2-dragula]

ng2-dragula is one of the best Drag and drop library for Angular 2x and succeeding versions. its Official Angular2 wrapper for dragula( AngularJs (1.x)). This library expose lot of drag and drop call backs and events while drag and drop operations. if your using dragula than tag dragula.

Official GitHub ng2-dragula

Install

You can get it on npm.

npm install ng2-dragula --save

Setup

You'll need to add DragulaModule to your application module.

AppModule

   @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        DragulaModule,
        ...
      ],
      providers: [],
      bootstrap: [AppComponent]
    })

export class AppModule {
}
@Component({
  selector: 'sample',
  template:`
  <div>
    <div class='wrapper'>
      <div class='container' [dragula]='"first-bag"'>
        <div>You can move these elements between these two containers</div>
        <div>Moving them anywhere else isn't quite possible</div>
        <div>There's also the possibility of moving elements around in the same container, changing their position</div>
      </div>
      <div class='container' [dragula]='"first-bag"'>
        <div>This is the default use case. You only need to specify the containers you want to use</div>
        <div>More interactive use cases lie ahead</div>
        <div>Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a></div>
      </div>
    </div>
  </div>
  `
})
class Sample {}

Try out the demo!

More information about event

132 questions
24
votes
5 answers

Angular 7: Uncaught ReferenceError: global is not defined when adding package

I am building an Angular 7 app, and when i add a package npm install dragula --save and import this into the pollyfills.ts file i get this error: index.js:2 Uncaught ReferenceError: global is not defined at…
3xGuy
  • 1,364
  • 1
  • 18
  • 35
15
votes
4 answers

Angular 2 Dragula Model updating incorrectly

Working with ng2-dragula. I'm looking to update the orderNumber for every item in a database using the new dropped order. dragulaService.dropModel.subscribe((value) => { var drake = dragulaService.find('bag-orders').drake var models =…
Dan Feinstein
  • 316
  • 1
  • 3
  • 15
8
votes
1 answer

Using ng2-dragula to drag and swap grid lists

I have a grid of lists and am trying to drag and swap the tiles of the grid with each other using ng2-dragula some.component.html
Arjun
  • 1,189
  • 1
  • 12
  • 24
8
votes
5 answers

How to disable drag some element on ng2-dragula

I want to display name group on the top and cancel the drag event on it. How can I disable moving some element like if this group name on the top. My code is: dragulaService.drag.subscribe((value) => { console.log(`drag: ${value[0]}`); }); My…
Vitaly Menchikovsky
  • 4,692
  • 15
  • 48
  • 87
6
votes
1 answer

ng2-dragula [dragula] (angular2 drag and drop) - *ngFor with [dragulaModel] attribute not working

Using ng2-dragula drag and drop wrapper library for angular 2 dragula. https://github.com/valor-software/ng2-dragula Seeing issues with the [dragulaModel]='myList' ... when the item gets dropped ... poof ... it disappears. Inspecting the element, I…
Dan J
  • 229
  • 3
  • 9
5
votes
1 answer

drag and drop with auto scrolling (dom-autoscrolling)

I have a list of text elements and want to automatically scroll my list to the bottom when I'm dragging my new element. This example below works properly once I drag-and-dropped one time an element in a list. I believe I need to call once an…
don
  • 51
  • 4
5
votes
3 answers

Dragula drag and drop one way with copy ng2

I am trying to drag and drop one way with copy with ng2 dragula This is my template. `
Drag/drop item 1
user4925190
  • 195
  • 2
  • 10
4
votes
1 answer

Ask confirmation on delete in ng2-dragula

I am using ng2-dragula im my Angular5 application. I need to get confirmation from user before deleting an item. Currently I have enabled removeOnSpill: true, so when the user drag out the item out of the container the item will be removed…
Rosa Mystica
  • 193
  • 2
  • 14
4
votes
2 answers

How to get attribute values from html in angular 4

I am working on angular 4 project, I had a requirement to drag item, So I was using ng2-dragula plugin to do it for me. Now I need to extract data-id attribute from each row after drop to specific position. dragulaService.drop.subscribe( …
Anuj K.C.
  • 448
  • 1
  • 10
  • 24
4
votes
0 answers

Angular 4 View not updating after model change

I have drag and drop option with a tree structure, but all the nodes are made siblings due to some functionalities, So that we can make any node as parent. I am using Dragula ng2-dragula for drag and drop. If I drag a parent, I need to move all the…
Balaji Perumal
  • 721
  • 5
  • 17
4
votes
1 answer

How to use ng2-dragula and angular element resizer

I'm using Dragula for drag and drop on my tables. Also I'm using plugin angular resizier element for resizing table columns. All this I've been working in Angular2. So what I want is this. My current situation is like this gray column on image.…
RubyDigger19
  • 775
  • 8
  • 34
4
votes
0 answers

Angular 2 dragulaModel throws Cannot read property 'splice' of undefined exception

I am using ng2-dragula and with data binding in 2 tables. When a td is drag and drop to another table, it throws the Uncaught TypeError: Cannot read property 'splice' of undefined. and is not able to drop the element. Need help on how to resolve…
user1214916
  • 209
  • 1
  • 12
4
votes
1 answer

Angular2 : ng2-dragula - nested dragula

I have a requirement to use nested ng-dragula in AngularJS 2 for the below nested student list items. Student 1 book1 book2 book3 Student 2 book4 book5 book6 Student 3 book7 book8 book9 I have to drag and drop…
Vipin
  • 761
  • 1
  • 7
  • 17
4
votes
1 answer

Getting error second time getting to page with ng2-dragula

I am trying to prevent user to move first element of dragulaService, the code works first time without any errors, but when I leave this page and then open it again, I'm getting error. The code that is causing the error: constructor(public…
Vitaly Menchikovsky
  • 4,692
  • 15
  • 48
  • 87
4
votes
3 answers

Angular2/Ionic2 + ng2-dragula Did anyone get it to work?

Im trying to add drag and drop into my ionic 2 app. But can't get it to work. This is what I have done so far: npm install ng2-dragula dragula --save then in my page: @Component({ templateUrl: 'build/pages/dragtest/dragtest.html', directives:…
Mike Smith
  • 115
  • 6
1
2 3
8 9