Reputation: 2954
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.
Do you know how I can do it ?
Upvotes: 1
Views: 2404
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