I have a div that has several cards inside them, I want to use dragula to allow setting the order of the cards by drag and drop. However I only want to allow dragging from a specific button only.
I tried setting the button as the container but that only moves the button. If I set the card as the container, the whole card is draggable from anywhere.
HTML
<div id="container">
<div class="card">
<figure>
<a href="scent/giorgio-armani-acqua-di-gio"><img src="img/perfumes/armani-acqua-di-gio.jpg"></a>
<button type="button" class="btn icon drag-handle"><span class="material-icons">drag_indicator</span></button>
</figure>
<div class="content">
<p>Acqua Di Gio</p>
<button type="button" class="btn text remove-slot">Remove</button>
</div>
</div>
...
...
</div>
JS
const dragulaV = dragula({
revertOnSpill: true
});
document.querySelectorAll('#container .drag-handle').forEach(el => {
dragulaV.containers.push(el);
});
To summarize: I want to move .card
and I only want to trigger it with .drag-handle
.