Livewire Sortable

A plugin/wrapper around Shopify's sortable package. It makes implementing sortable interfaces super simple using Livewire.

Installation

$3

html

$3


npm install livewire-sortable --save-dev


Import the package in your bundle:


import 'livewire-sortable'
// Or.
require('livewire-sortable')


Usage

For simple layouts that only require simple sorting like a todo list, add the wire:sortable, wire:sortable.item, and wire:sortable.handle attributes to your markup as follows.

`html


    @foreach ($tasks as $task)
        
            {{ $task->title }}

            
        

    @endforeach

For creating a nested layout with draggable groups with draggable items inside each group, similar to Trello, add the wire:sortable, wire:sortable-group, wire:sortable.item, wire:sortable.handle, wire:sortable-group.item-group, and wire:sortable-group.item attributes to your markup as follows.

`html


    @foreach ($groups as $group)
        
            
                {{ $group->label }}
                
            
            

                @foreach ($group->tasks()->orderBy('order')->get() as $task)
                    
                        {{ $task->title }}
                        
                    

                @endforeach
            
            

                
                
            

        

    @endforeach

Styling

If you want to add your own styles to elements during various "draggable" states (like adding a shadow to an item while dragging), reference Shopify's Draggable/Sortable plugin's docs directly: https://github.com/Shopify/draggable/blob/58d79dc9fb5b82271c5dfec74a5c9207cfab01f5/src/Draggable/README.md#classes

Livewire Sortable

A plugin/wrapper around Shopify's sortable package. It makes implementing sortable interfaces super simple using Livewire.

Installation

$3

html

$3


npm install livewire-sortable --save-dev


Import the package in your bundle:


import 'livewire-sortable'
// Or.
require('livewire-sortable')


Usage

For simple layouts that only require simple sorting like a todo list, add the wire:sortable, wire:sortable.item, and wire:sortable.handle attributes to your markup as follows.

`html


    @foreach ($tasks as $task)
        
            {{ $task->title }}

            
        

    @endforeach

`html


    @foreach ($groups as $group)
        
            
                {{ $group->label }}
                
            
            

                @foreach ($group->tasks()->orderBy('order')->get() as $task)
                    
                        {{ $task->title }}
                        
                    

                @endforeach
            
            

                
                
            

        

    @endforeach