问题
I want to display name group on the top and cancel the drag event on it. How can I disable moving some element like if this group name on the top. My code is:
dragulaService.drag.subscribe((value) => {
console.log(`drag: ${value[0]}`);
});
My template :
<div class='wrapper'>
<div class='container' *ngFor='let group of groups' [dragula]='"nested-bag"'>
<div class="center-block">Table Number : {{group.name}}</div>
<div *ngFor='let item of group.items' [innerHtml]='item.name'></div>
</div>
</div>
回答1:
find a solution:
dragulaService.setOptions('nested-bag', {
revertOnSpill: true,
moves: function (el:any, container:any, handle:any):any {
debugger
console.log(el, container);
return false;
}
});
回答2:
To disable dragging element with specific class:
dragulaService.setOptions('PUT_CONTAINER_NAME_HERE', {
moves: function (el: any, container: any, handle: any): any {
if (el.classList.contains('PUT_YOUR_CLASS_HERE')) {
return false;
}
return true;
}
});
回答3:
Since Version 2 (released 2018-07-19) you should use dragulaService.createGroup()
instead of dragulaService.setOptions()
:
dragulaService.createGroup('<container-name>', {
moves: (el, container, handle, sibling) => false
});
回答4:
You need to add both functions(moves, accepts). Moves will prevent you to event start dragging the element. Accepts with sibling null will prevent other draggable elements trying to change position with the one is not in the model.
dragulaService.setOptions('PUT_CONTAINER_NAME_HERE', {
moves: function (el: any, container: any, handle: any): any {
if (el.classList.contains('PUT_YOUR_CLASS_HERE')) {
return false;
}
return true;
},
accepts: (el, target, source, sibling) => {
if (sibling === null) {
return false;
}
});
回答5:
Here is an alternative. You can use invalid
instead of moves
. Taken from the documentation:
You can provide an
invalid
method with a(el, handle)
signature. This method should returntrue
for elements that shouldn't trigger a drag. Thehandle
argument is the element that was clicked, whileel
is the item that would be dragged. Here's the default implementation, which doesn't prevent any drags.function invalidTarget (el, handle) { return false; }
Note that
invalid
will be invoked on the DOM element that was clicked and every parent up to immediate children of adrake
container.
来源:https://stackoverflow.com/questions/41137782/how-to-disable-drag-some-element-on-ng2-dragula