InforDraggables@1.0.3.js

<infor-draggable id="list" onchange="updateOrder" wire:onchange="update">
    <infor-draggable-item value="1" class="draggable-item">Item 1</infor-draggable-item>
    <infor-draggable-item value="2" class="draggable-item">Item 2</infor-draggable-item>
    <infor-draggable-item value="3" class="draggable-item">Item 3</infor-draggable-item>
</infor-draggable>

<script>

    //Option 1: Use onchange attribute
    function updateOrder(values, id){
        console.log('List updated:', id);
        console.log('New order:', values);
    }

    //Option 2: Use InforDraggable.onChange()
    InforDraggable.onChange('list', (values, id) => {
      console.log('List updated:', id);
      console.log('New order:', values);
    });

    //Option 3: Native element
    const values = document.getElementById('list').values;
    console.log('Current order:', values);

</script>

Options

Tag / Attribute	Description	Required
infor-draggable	Draggable container	True
infor-draggable [id]	Instance identifier	True
infor-draggable-item	Draggable item element	True
item [value]	Value associated with the item	False
onchange	Trigger onchange with updated values array	False
wire:onchange	Trigger Livewire.emit on change with updated values array	False
infor-draggable-item * [data-no-grab]	Exclude elements from the grabbing

Important Notes

The items and the container should not have margin and padding. Use gap on the container or wrapper elements for spacing instead.

/* Use this instead of margin on the items */
infor-draggable {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

Instance

Use InforDraggable.onChange(id, callback) to register a callback.

//Register callback
InforDraggable.onChange('list', (values) => {
    console.log('New order:', values);
});

//Get values
const values = InforDraggable.values('list');
console.log('Current order:', values);

Method	Parameters	Description
onChange()	`id: string, callback: fn`	Static method to register a callback that triggers when items are reordered
values()	`id: string`	Static method to get the current values array

Nested Draggables

Draggable containers can be nested inside draggable items for hierarchical drag-and-drop functionality.

<infor-draggable id="parent">
    <infor-draggable-item value="1">
        Parent Item 1
        <infor-draggable id="nested">
            <infor-draggable-item value="1-1">Nested Item 1</infor-draggable-item>
            <infor-draggable-item value="1-2">Nested Item 2</infor-draggable-item>
        </infor-draggable>
    </infor-draggable-item>
    <infor-draggable-item value="2">Parent Item 2</infor-draggable-item>
</infor-draggable>

Livewire Integration

When using wire:onchange, the component will emit a Livewire event with the updated values array.

<infor-draggable id="tasks" wire:onchange="updateTaskOrder">
    <infor-draggable-item value="task-1">Task 1</infor-draggable-item>
    <infor-draggable-item value="task-2">Task 2</infor-draggable-item>
</infor-draggable>

// In your Livewire component
public function updateTaskOrder($values, $id)
{
    // $values = ['task-2', 'task-1'] (new order)
    // $id = 'tasks'
}