alpine-dragdrop

AlpineJS Plugin for easily adding drag and drop capabilities

Install

$3

``html



`

$3

`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()
`

Example

Examples of how the plugin works.

$3

`html



`
Add the x-drag:list 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'"
>


Drag Item 1

Drag Item 2

Drag Item 3

`

You can override the default behavior of the drop method by adding a custom method to the x-drop:target directive.

`html



`

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.

Stats