AlpineJS Plugin for easily adding drag and drop capabilities
npm install alpine-dragdropAlpineJS Plugin for easily adding drag and drop capabilities
``html
`
`shell
yarn add -D alpine-dragdrop
npm install -D alpine-dragdrop
`
`js
import Alpine from 'alpinejs'
import dragdrop from 'alpine-dragdrop'
Alpine.plugin(dragdrop)
Alpine.start()
`
Examples of how the plugin works.
`html`
x-drag:list.preventSelf
x-bind:class="$list.isDragging ? 'bg-red-500' : 'bg-blue-500'"
>
class="list list-disc list-inside"
x-drop:target
x-bind:class="$droparea.isEntered ? 'bg-green-500' : 'bg-blue-500'">
Drop List
one
two
x-drag:list
Add the directive to the list you want to drag from and the x-drop:target directive to the list you want to drop into.
Each List Item will have a unique ID generated for it.
If you want to update the unique ID of the item being dragged, you can add the value to x-drag:list-item directive.
`html` x-drag:list.preventSelf
x-bind:class="$list.isDragging ? 'bg-red-500' : 'bg-blue-500'"
>
You can override the default behavior of the drop method by adding a custom method to the x-drop:target directive.
`html`
x-drag:list.preventSelf
x-bind:class="$list.isDragging ? 'bg-red-500' : 'bg-blue-500'"
>
class="list list-disc list-inside"
x-drop:target="handle"
x-bind:class="$droparea.isEntered ? 'bg-green-500' : 'bg-blue-500'">
Drop List
one
two
You can check if a list item is being dragged by checking the $list.isDragging property.
You can check if a drop area is being entered by checking the $droparea.isEntered` property.



