https://github.com/livewire/sortable

A plugin to bring drag/sort capability to Livewire
https://github.com/livewire/sortable

Last synced: 6 days ago
JSON representation

A plugin to bring drag/sort capability to Livewire

• Host: GitHub
• URL: https://github.com/livewire/sortable
• Owner: livewire
• Created: 2020-01-13T02:39:30.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-23T23:19:44.000Z (4 months ago)
• Last Synced: 2025-01-02T14:03:53.862Z (13 days ago)
• Language: JavaScript
• Size: 312 KB
• Stars: 534
• Watchers: 17
• Forks: 50
• Open Issues: 33
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-livewire - Livewire Sortable

README

        
# Livewire Sortable

A plugin/wrapper around [Shopify's sortable package](https://github.com/Shopify/draggable/tree/master/src/Sortable). It makes implementing sortable interfaces super simple using Livewire.

## Installation

### CDN

```html

```

> Note: this package only supports Livewire v3. If you are using v2, use version `0.3.0` of this package.

### NPM

```

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 }}

            Remove

        

    @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.handle`, `wire:sortable-group.item-group`, and `wire:sortable-group.item` attributes to your markup as follows.

```html



    @foreach ($groups as $group)

        


            


                
{{ $group->label }}


                Remove

            


            


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

                    


                        {{ $task->title }}

                        Remove

                    

                @endforeach

            


            

                

                Add Task

            

        

    @endforeach


    

        

        Add Task Group

    



```


## 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