Custom directive for Alpine.js
Adds drag and drop functionality for Alpine JS components. Heavily inspired by alpine-magic-helpers
Include the following <script>
tag in the <head>
of your document before Alpine:
<script src="https://cdn.jsdelivr.net/gh/tvdr/[email protected]/dist/index.min.js" defer></script>
Minimum settings:
<div x-data="{}">
<div x-dnd='{nodes:".draggable",group:"dnd_numbers"}'>
<div class="draggable">1</div>
</div>
<div x-dnd='{nodes:".draggable",group:"dnd_numbers"}'>
</div>
</div>
x-dnd
: to init element as droptarget (does not need to have common parent component)
nodes
: a querySelector string. Matching children from the droptarget will be draggable
group
: for linking together droptargets
Detailed docs with all functionality coming soon..
Copyright (c) 2021 Tibor Barta
Licensed under the MIT license, see LICENSE.md for details.