estevan gomez estevan gomez - 6 months ago 364
Javascript Question

Angular2 NG2-Dragula no drag n drop

I am using NG2-Dragula

I am also using this boilerplate: Download Repo

This is the code:

systemjs.config.js:

(function(global) {

// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'@angular': 'node_modules/@angular',
'ng2-dragula': 'node_modules/ng2-dragula', //for ng2-dragula
'dragula': 'node_modules/ng2-dragula' //for ng2-dragula
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'ng2-dragula': { main: 'ng2-dragula.js', defaultExtension: 'js' } //for ng2-dragula
};

var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/testing',
'@angular/upgrade'
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
map: map,
packages: packages
};

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }

System.config(config);

})(this);


app.component.ts:

import {Component} from '@angular/core';
import {Dragula, DragulaService} from 'ng2-dragula/ng2-dragula';

@Component({
selector: 'my-app',
directives: [Dragula],
viewProviders: [DragulaService],
template:`
<div>
<div class='wrapper'>
<div class='container' [dragula]='"first-bag"' style="background-color:green;padding:10px;margin-bottom:20px;">
<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"' style="background-color:red;padding:10px;margin-bottom:20px;">
<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>
`,
})
export class AppComponent {

}


If you try and drag the divs nothing happens.

What I'm I missing or done wrong here?

Console:

The actually code is running via npm start ... but the console does has these error: Dragula.prototype.ngOnInit@http://localhost:3000/node_modules/ng2-dragula/src/app/directives/dragula.directive.js:40:26
anonymous/_View_AppComponent0.prototype.detectChangesInternal@AppComponent.template.js:147:88
AppView.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:9
DebugAppView.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/src/linker/view.js:289:13
AppView.prototype.detectViewChildrenChanges@http://localhost:3000/node_modules/@angular/core/src/linker/view.js:220:13
AppView.prototype.detectChangesInternal@http://localhost:3000/node_modules/@angular/core/src/linker/view.js:211:9
AppView.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:9
DebugAppView.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/src/linker/view.js:289:13
ViewRef_.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/src/linker/view_ref.js:119:54
ApplicationRef_.prototype.tick/<@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:361:75
Call@http://localhost:3000/node_modules/es6-shim/es6-shim.min.js:10:4652
forEach@http://localhost:3000/node_modules/es6-shim/es6-shim.min.js:10:19622
ApplicationRef_.prototype.tick@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:361:13
ApplicationRef_.prototype._loadComponent@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:332:9
ApplicationRef_.prototype.bootstrap/<@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:321:13
ApplicationRef_.prototype.run/<@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:292:26
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:323:20
NgZoneImpl/this.inner<.onInvoke@http://localhost:3000/node_modules/@angular/core/src/zone/ng_zone_impl.js:45:32
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:322:20
Zone</Zone</Zone.prototype.run@http://localhost:3000/node_modules/zone.js/dist/zone.js:216:25
NgZoneImpl.prototype.runInner@http://localhost:3000/node_modules/@angular/core/src/zone/ng_zone_impl.js:76:60
NgZone.prototype.run@http://localhost:3000/node_modules/@angular/core/src/zone/ng_zone.js:223:51
ApplicationRef_.prototype.run@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:290:9
ApplicationRef_.prototype.bootstrap@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:312:16
coreLoadAndBootstrap/</<@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:100:43
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:323:20
NgZoneImpl/this.inner<.onInvoke@http://localhost:3000/node_modules/@angular/core/src/zone/ng_zone_impl.js:45:32
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:322:20
Zone</Zone</Zone.prototype.run@http://localhost:3000/node_modules/zone.js/dist/zone.js:216:25
scheduleResolveOrReject/<@http://localhost:3000/node_modules/zone.js/dist/zone.js:571:53
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:356:24
NgZoneImpl/this.inner<.onInvokeTask@http://localhost:3000/node_modules/@angular/core/src/zone/ng_zone_impl.js:36:32
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:355:24
Zone</Zone</Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:256:29
drainMicroTaskQueue@http://localhost:3000/node_modules/zone.js/dist/zone.js:474:26
ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:426:22

Answer

Try this:

systemjs.config:

var map =       {
    ...
    'dragula': 'node_modules/dragula/dist/dragula.js',
    'ng2-dragula': 'node_modules/ng2-dragula'
  };

var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'dragula': { defaultExtension: 'js' },
    'ng2-dragula': {defaultExtension: 'js' }
  };

var config = {
    map: map,
    packages: packages  
  }`

Then import

import {Dragula, DragulaService} from 'ng2-dragula/ng2-dragula';

And in @Component

directives: [Dragula], 
viewProviders: [DragulaService]