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
0
votes
1 answer

Drag and drop using ng2-dragula between two angular components

I have two angular components, one called pallet containing individual pallet items and another called host which is initially empty. I've declared ndragula directives for each of these components ('pallet-bag' and 'host-bag' respectively). I'm able…
auburg
  • 1,373
  • 2
  • 12
  • 22
0
votes
1 answer

Angular 2 - ng2-dragula

...
  • {{ ticket }}
I have few columns.…
0
votes
1 answer

Angular2 - Get Name When Using Dynamic Component Loader Wrapper To Display List of Components

I'm using a Dynamic Component Loader to display a list of components with a *ngFor:
av0000
  • 1,917
  • 6
  • 31
  • 51
0
votes
1 answer

Angular2 dragula index file not found

i m install dragula and fix the system.config var map = { 'app': 'dist', // 'dist', '@angular': 'node_modules/@angular', 'rxjs': 'node_modules/rxjs', 'dragula': …
corsaro
  • 731
  • 1
  • 9
  • 24
0
votes
1 answer

Dragula Drag only wanted elements

Here is my component.html
Drixson Oseña
  • 3,631
  • 3
  • 23
  • 36
0
votes
1 answer

ng2-dragula group items in div

I come across the ng2-dragula project when trying to prototype some drag and drop functionality. I was wondering how to group the following structure as one 'drake' entity?
...
When I add…
ethan
  • 1,881
  • 2
  • 17
  • 31
0
votes
1 answer

AOT error: require is not defined (caused by ng2-dragula library)

I have an angular 2 application and am using ng2-dragula library. Everything is working in development (JIT compilation) mode. When I compile with AOT, the aot build and rollup are successful, but then I get this error in the browser: Uncaught…
Kevin Quiring
  • 639
  • 1
  • 11
  • 26
0
votes
1 answer

ng2-dragula style original element when copying

We're using the copy: true setting with ng2-dragula: constructor(private dragulaService: DragulaService) { dragulaService.setOptions('group-body-bag', { copy: true, copySortSource: true }); } Now we want to fade out the…
Lukas
  • 9,752
  • 15
  • 76
  • 120
0
votes
1 answer

Angular/2 : ng2-dragula - Create dynamic nested elements

I'm trying to implement a dynamic tree using ng2-dragula. I'm using an ordered list for display purposes such as
  1. Category One
    1. Category 1.1 …
prime
  • 2,004
  • 3
  • 28
  • 45
0
votes
1 answer

angular 2 & ng2-dragula - adding directives into component

I'm using Angular 2.0.0-rc6 and ng2-dragula. I wanted to create a simple list of words and be able to drag n' drop inside it. When i try to add the attribute "directive" to my component, it says that "directive" can not be a part of the Component…
NoP
  • 15
  • 6
1 2 3
8
9