CODEWITHSUNDEEP
angularng2-dragula
Adrien
Adrien

Reputation: 2954

Move items with ng2-dragula from special place

I have an angular 4 application with the librairie ng2-dragula. I want to drag and drop some items but just if we take the item from a special place (with an icon) and not from anywhere on the item.

This is my code is my ts file:

constructor(private dragulaService: DragulaService) {
    dragulaService.drop.subscribe((value) => {
        this.onDrop(value);
    });
}

And my html file :

<tbody [dragula]='"other-bag"' [dragulaModel]='commands'>
    ...
</tbody>

So, I have something like this picture but I want to allow the move just if we take the item from the 2 vertical bars.

enter image description here

Do you know how I can do it ?

Upvotes: 1

Views: 2404

Answers (1)

Pierre Mallet
Pierre Mallet

Reputation: 7221

TL:DR Options for dragula bags have a property "moves" which is a function provided with the targeted element of the dragstart event as third parameter (handle)

  moves: function (el, source, handle, sibling) {
    return true; // elements are always draggable by default
  },

so you can check property of the handle element to check if you want to allow the drag

There is a snippet of demo in the docs :

https://valor-software.com/ng2-dragula/index.html

search for "Drag handles float your cruise?" ...

<div [dragula]='"sixth-bag"'></div>
<div [dragula]='"sixth-bag"'></div>

class MuchExample {
  constructor(private dragulaService: DragulaService) {
    dragulaService.setOptions('sixth-bag', {
      moves: function (el, container, handle) {
        return handle.className === 'handle';
      }
    });
  }
}

Hope it helps

Upvotes: 3

Related Questions