npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wotz/livewire-sortablejs

v1.0.0

Published

Laravel Livewire plugin to use Sortable.js

Downloads

758

Readme

Livewire Sortable.js

Latest Version on NPM NPM total downloads NPM downloads per month

A plugin/wrapper around Sortable.js package.

Why use this instead of Livewire's official livewire-sortable package?

The livewire-sortable package uses Shopify's sortable package. We noticed some issues with that package compared to Sortable.js:

  • Shopify's sortable package does not retain an item's original height and width while dragging. Sortable.js does this by default.
  • Sortable.js also works well in combination with Alpine.js while Shopify's sortable package can cause errors while dragging, especially when using Alpine.js x-for method in an draggable item.

Do you want to make the switch from livewire-sortable to livewire-sortable.js? That's easy, because this package works exactly the same! The only difference is the javascript package it uses in the background. You will not have to change any Livewire attributes or methods!

Installation

CDN

<script src="https://unpkg.com/@wotz/[email protected]/dist/livewire-sortable.js"></script>

If you use Livewire v2, you need to use v0.2.

NPM

npm install @wotz/livewire-sortablejs --save-dev

Import the package in your bundle:

import '@wotz/livewire-sortablejs';

// or

require('@wotz/livewire-sortablejs');

Usage

One group with draggable items

When you only have one list of draggable items (e.g. to-do list), you have to add the following attributes to your html:

  • wire:sortable="methodName": This attribute should be added to the html element that encapsulates all draggable items. The value of this attribute is the Livewire method that will be executed when an item has been dragged.
  • wire:sortable.options: This optional attribute can be added to the html element that has the wire:sortable attribute. With the different options of Sortable.js, you can use this attribute to customize how the items are dragged and sorted.
  • wire:sortable.item="itemIdentifier": This atttribute should be added to each individual draggable item. The value of this attribute will be used to inform you about the updated order.
  • wire:sortable.handle: This is an optional attribute. If you provide this attribute, then you will only be able to drag an item by dragging this html element. If you do not provide it, then the complete item will draggable.
<ul wire:sortable="updateTaskOrder" wire:sortable.options="{ animation: 100 }">
    @foreach ($tasks as $task)
        <li wire:sortable.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
            <h4>{{ $task->title }}</h4>
            <button wire:sortable.handle>drag</button>
        </li>
    @endforeach
</ul>

When the order is updated, you will receive the following array structure in your Livewire method:

[
    [
        'order' => 1,   // order of item (starts at 1, not 0)
        'value' => 20,  // item id
    ],
]

Multiple groups with draggable items

When you have multiple lists, each with items that can be moved between those different lists, you have to add the following attributes to your html:

  • wire:sortable-group="methodName": This attribute should be added to the html element that encapsulates all lists. The value of this attribute is the Livewire method that will be executed when an item has been dragged.
  • wire:sortable-group.item-group="groupIdentifier": This atttribute should be added to the root element of a list with draggable items. The value of this attribute will be used to inform you about the updated order.
  • wire:sortable-group.options: This optional attribute can be added to every html element that has the wire:sortable-group.item-group attribute. With the different options of Sortable.js, you can use this attribute to customize how the items are dragged and sorted.
  • wire:sortable-group.item="itemIdentifier": This atttribute should be added to each individual draggable item in each list. The value of this attribute will be used to inform you about the updated order.
  • wire:sortable-group.handle: This is an optional attribute. If you provide this attribute, then you will only be able to drag an item by dragging this html element. If you do not provide it, then the complete item will draggable.
<div wire:sortable-group="updateTaskOrder">
    @foreach ($groups as $group)
        <div wire:key="group-{{ $group->id }}">
            <h4>{{ $group->label }}</h4>

            <ul wire:sortable-group.item-group="{{ $group->id }}" wire:sortable-group.options="{ animation: 100 }">
                @foreach ($group->tasks()->orderBy('order')->get() as $task)
                    <li wire:sortable-group.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
                        <span>{{ $task->title }}</span>
                        <button wire:sortable-group.handle>drag</button>
                    </li>
                @endforeach
            </ul>
        </div>
    @endforeach
</div>

When an item is dragged, you will receive the following array structure in the Livewire method you provided to the wire:sortable-group directive (in this example, the updateTaskOrder method):

[
    [
        'order' => 1,            // order of group (starts at 1, not 0)
        'value' => 20,           // group id
        'items' => [
            [
                'order' => 1,    // order of item within group (starts at 1, not 0)
                'value' => 50,   // item id
            ]
        ]
    ]
]

Multiple draggable groups with draggable items

When you have multiple lists, each with items that can be moved between those different lists and the lists themselves also need to be draggable, you have to add the following attributes to your html:

  • wire:sortable="methodName": This attribute should be added to the html element that encapsulates all draggable groups. The value of this attribute is the Livewire method that will be executed when a group has been dragged.

  • wire:sortable.options: This optional attribute can be added to the html element that has the wire:sortable attribute. With the different options of Sortable.js, you can use this attribute to customize how the groups are dragged and sorted.

  • wire:sortable.item="groupIdentifier": This atttribute should be added to each individual draggable group. The value of this attribute will be used to inform you about the updated group order.

  • wire:sortable.handle: This is an optional attribute. If you provide this attribute, then you will only be able to drag a group by dragging this html element. If you do not provide it, then the complete group will draggable.

  • wire:sortable-group="methodName": This attribute should be added to the html element that encapsulates all lists. The value of this attribute is the Livewire method that will be executed when an item has been dragged.

  • wire:sortable-group.item-group="groupIdentifier": This atttribute should be added to the root element of a list with draggable items. The value of this attribute will be used to inform you about the updated order.

  • wire:sortable-group.options: This optional attribute can be added to every html element that has the wire:sortable-group.item-group attribute. With the different options of Sortable.js, you can use this attribute to customize how the items are dragged and sorted.

  • wire:sortable-group.item="itemIdentifier": This atttribute should be added to each individual draggable item in each list. The value of this attribute will be used to inform you about the updated order.

  • wire:sortable-group.handle: This is an optional attribute. If you provide this attribute, then you will only be able to drag an item by dragging this html element. If you do not provide it, then the complete item will draggable.

<div wire:sortable="updateGroupOrder" wire:sortable-group="updateTaskOrder" wire:sortable.options="{ animation: 50 }">
    @foreach ($groups as $group)
        <div wire:sortable.item="{{ $group->id }}" wire:key="group-{{ $group->id }}">
            <h4>{{ $group->label }}</h4>
            <button wire:sortable.handle>drag group</button>

            <ul wire:sortable-group.item-group="{{ $group->id }}" wire:sortable-group.options="{ animation: 100 }">
                @foreach ($group->tasks()->orderBy('order')->get() as $task)
                    <li wire:sortable-group.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
                        <span>{{ $task->title }}</span>
                        <button wire:sortable-group.handle>drag item</button>
                    </li>
                @endforeach
            </ul>
        </div>
    @endforeach
</div>

When an item is dragged, you will receive the following array structure in the Livewire method you provided to the wire:sortable-group directive (in this example, the updateTaskOrder method):

[
    [
        'order' => 1,            // order of group (starts at 1, not 0)
        'value' => 20,           // group id
        'items' => [
            [
                'order' => 1,    // order of item within group (starts at 1, not 0)
                'value' => 50,   // item id
            ]
        ]
    ]
]

When a group is dragged, you will receive the following array structure in the Livewire method you provided to the wire:sortable directive (in this example, the updateGroupOrder method):

[
    [
        'order' => 1,            // order of group (starts at 1, not 0)
        'value' => 20,           // group id
    ]
]

Building

npm run build

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Credits

This package is inspired by Livewire's official livewire-sortable plugin.

License

The MIT License (MIT). Please see License File for more information.