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

130 questions
2
votes
1 answer

add and remove class in typescript

I am developing an angular5 application. I have an array containg list of question and I displayed it by iterating using ngFor.User can select questions of his choice by pressing ctrl key. After selecting a question by pressing ctrl key that will…
Rosa Mystica
  • 243
  • 1
  • 3
  • 17
2
votes
2 answers

Angular nested draggable rows and columns

Resources I've looked at: https://github.com/valor-software/ng2-dragula Issues describing similar problems: https://github.com/valor-software/ng2-dragula/issues/309 https://github.com/valor-software/ng2-dragula/issues/663 I'm using ng2-dragula and…
Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175
2
votes
3 answers

Angular 2/4 Observable - why is ng2-dragula sending multiple drop events after a single drag and drop in the UI?

EDIT regarding question title change The original question title was this: Angular 2/4 Observable - how to modify the object that emits values inside the subscribe without firing more events? After extensive investigation that was not the cause of…
rmcsharry
  • 5,363
  • 6
  • 65
  • 108
2
votes
1 answer

Using Dragula with Ionic Slides

I am using Dragula within my Ionic project. This is working nicely and I can drag and drop items between the top panel and the bottom panel.
Chris
  • 4,672
  • 13
  • 52
  • 93
2
votes
1 answer

Ionic 3 - Dragula - CSS style being lost - mirrorContainer

I am a new developer and new to Ionic. Trying to integrate the Dragula module and I have it working in terms of being able to re-order my elements but the CSS is being lost between drag and drop. (comes back again once you drop it). I have read the…
Kirsten
  • 171
  • 1
  • 3
  • 13
2
votes
2 answers

Angular 4 Can't bind to 'dragula' since it isn't a known property of 'div'

I'm struggling with binding ng2-dragula to AspNetCore SPA template. Tried everything, but still getting: Exception: Call to Node module failed with error: Error: Template parse errors: Can't bind to 'dragula' since it isn't a known property of…
Zvar Yuga
  • 21
  • 5
2
votes
0 answers

Dragula - drag and drop column in angular 2

I'm using Dragula for drag and drop on my tables. Also I'm using plugin angular resizier element for resizing table columns Plugin url here. All this I've been working in Angular2. Here is part of code where I'm achieving this.
RubyDigger19
  • 835
  • 13
  • 38
2
votes
0 answers

Dragging Event ngDragula

How can I get access to the current X,Y coordinates of the draggable object in ng-dragula for angular2? For example, dragging event. Many thanks
Aboulfouz
  • 98
  • 8
2
votes
1 answer

ng2-dragula and dynamic form no sync directly

I have a form generated dynamically by the user: // this._fb is a FormBuilder ngOnInit():void { this.myForm = this._fb.group({ message: this._fb.array([ ]) }); the json generated is something like { "message": [ { …
Alexis
  • 2,149
  • 2
  • 25
  • 39
2
votes
1 answer

Uncaught TypeError: ctorParameters.map is not a function

I am trying ti use dragula in my angular2 app. Here is the app.module in my code: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; …
Sal-laS
  • 11,016
  • 25
  • 99
  • 169
2
votes
2 answers

What is the correct replacement for the @Component metadata directives array?

In many examples on the web I see code with a directives array in the @Component metadata ie: @Component({ selector: 'sprint-tasks', inputs: ['sprintTask'], templateUrl: './views/sprint-tasks.html', directives: [Dragula], providers:…
BradleyDotNET
  • 60,462
  • 10
  • 96
  • 117
2
votes
0 answers

Applying time delay for drag in ng2dragula

how to drag the element with time delay in ng2dragula. Nothing mentioned about specifying delay in documentation.
NandhiniTK
  • 71
  • 6
1
vote
1 answer

ng2-dragula after adding new item it's getting displayed at the top

I am using ng2-dragula for drag and drop feature. I am seeing issue when I drag and drop first element(or any element) at the end and then try to add new item to the array using addNewItem button, new item is not getting added to the end. If i don't…
1
vote
2 answers

Copy with ng2-dragula

I would like to have my source model to remain unchanged after dragging one element away. Here is what i have sofar: component.ts: constructor(private dragulaService: DragulaService) { …
KGBR
  • 435
  • 1
  • 8
  • 17
1
vote
0 answers

In angular 8, How to drag/drop the content from one component into another component

1st problem - Drag the content from the one component list and drop the content into another component and content will not be dropped into particular position. 2nd problem - when drag the content from one position to another position then original…
Nikita Garg
  • 157
  • 1
  • 2
  • 11
1 2
3
8 9