When using dragula, the default behavior allows users to drag elements from one container and drop them into another. If the element is dropped outside of any containers, the event will be canceled gracefully based on the revertOnSpill and removeOnSpill options.
In the example below, users can drag items from left to right and vice versa. This code snippet should be implemented in HomePage.component.html:
<div class="wrapper"> <div class="container master" [dragula]="'editor-bag'" [dragulaModel]="q1">
<div *ngFor="let item of q1" class="box">
{{item}}
</div>
</div>
<div class="container" [dragula]="'editor-bag'">
</div>
Furthermore, create HomePageComponent.ts file and include an `accepts` method with the following signature: (el, target, source, sibling).
import { DragulaService, DragulaDirective } from 'ng2-dragula/ng2-dragula';
import { Router, Route, ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.css'],
})
export class HomePageComponent implements OnInit {
q1 = [];
q2 = [];
static _debug: boolean = false;
_debug: boolean = HomePageComponent._debug;
constructor(private dragulaService: DragulaService, private router: Router, private route: ActivatedRoute) {
for (var i = 0; i < 10; i++) {
this.q1.push("1. <" + i + ">");
//this.q2.push("2. <" + i + ">");
}
dragulaService.setOptions('editor-bag', {
accepts: function (el, target, source, sibling) {
var fn_debug = true;
var acceptAll = false;
if (this._debug || fn_debug) {
console.log("accepts() start el, target, source, sibling");
console.log({ el, target, source, sibling });
}
if (target.classList.contains('master')) {
return false;
}
if (sibling == null) {
return (target.children.length == 0);
}
var name: string = el.innerText;
return false;
},
direction: 'vertical',
copy: function (el, source) {
if (this._debug) {
console.log("copy() start");
console.log(el);
console.log(source);
console.log("copy() stop");
}
return source.classList.contains('master');
},
copySortSource: false,
revertOnSpill: false,
removeOnSpill: true,
mirrorContainer: document.body,
ignoreInputTextSelection: true
})
}
ngOnInit() {
this.dragulaService.drag.subscribe((value: any) => {
if (this._debug) {
console.log("drag start");
console.log(value);
console.log("drag stop");
console.log(`drag: ${value[0]}`);
}
// this.onDrag(value.slice(1));
});
this.dragulaService.drop.subscribe((value: any) => {
console.log(`drop: ${value[0]}`);
//this.onDrop(value.slice(1));
});
this.dragulaService.over.subscribe((value: any) => {
if (this._debug) { console.log(`over: ${value[0]}`); }
// this.onOver(value.slice(1));
});
this.dragulaService.out.subscribe((value: any) => {
if (this._debug) { console.log(`out: ${value[0]}`); }
//this.onOut(value.slice(1));
});
}
}
Sharing my solution here might benefit others who come across similar challenges.