Dragula drag and drop one way with copy ng2

Question

I am trying to drag and drop one way with copy with ng2 dragula This is my template.

`<div>
   <div class='wrapper'>
     <div class='container' id='no-drop' [dragula]='"first-bag"'>
       <div>Drag/drop item 1</div>
     </div>
     <div class='container' [dragula]='"first-bag"'>
       <div>Drag/drop item 2</div>
     </div>
   </div>
 </div>`

I have set the option to copy in my component.

constructor(private dragulaService: DragulaService) {
dragulaService.setOptions('first-bag', {
  copy: true
});

But if i set moves to false, i am not able to drag at all. How can i move from left to right and not the other way.

score 8 · Accepted Answer · answered Apr 19 '17 at 16:19

8

I found the answer soon after posting!!

   constructor(private dragulaService: DragulaService) {
    dragulaService.setOptions('first-bag', {
      copy: true,
      moves: function (el, container, handle) {
        return container.id !== 'no-drop';
      }
    });

answered Apr 19 '17 at 16:19

user4925190

205
3
11

1

New version of ng2-dragula does not agree with this. you need to replace 'setOptions' with 'createGroup'. – adibro500 Nov 14 '19 at 11:45

score 3 · Answer 2 · answered May 08 '17 at 12:44

By default, dragula will allow the user to drag an element in any of the containers and drop it in any other container in the list. If the element is dropped anywhere that's not one of the containers, the event will be gracefully cancelled according to the revertOnSpill and removeOnSpill options.

The example below allows the user to drag elements from left into right, and from right into left. Create code 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>

Next, create HomePageComponent.ts. Also, there need to set 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',             // Y axis is considered when determining where an element would be dropped
      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');
      },                       // elements are moved by default, not copied
      copySortSource: false,             // elements in copy-source containers can be reordered
      revertOnSpill: false,              // spilling will put the element back where it was dragged from, if this is true
      removeOnSpill: true,              // spilling will `.remove` the element, if this is true
      mirrorContainer: document.body,    // set the element that gets mirror elements appended
      ignoreInputTextSelection: true     // allows users to select input text, see details below
    })
  }
  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));
      });
    }

}

I'm posting my solution as it may also help someone.

Changing the 'copy' attribute into a function did what I was expecting! Thanks for pointing out that simple solution! — CEPA, Nov 22 '19 at 22:11

score 1 · Answer 3 · answered Apr 28 '17 at 14:02

I prefer using accepts function instead using moves function.

because using moves function you can stop moving items from the container. accepts function decide whether target container is valid.

accepts: function (el, target, source, sibling) {
              // your condition
            },

Dragula drag and drop one way with copy ng2

3 Answers3