npmpackage.info

Gathering detailed insights and metrics for livewire-sortable

Other packages similar to livewire-sortable

@nextapps-be/livewire-sortablejs

0.4.1

Laravel Livewire plugin to use Sortable.js

livewire-sortablejs

0.1.1

A Livewire wrapper for SortableJS.

livewire-draggable

1.0.0

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

@wotz/livewire-sortablejs

1.0.0

Laravel Livewire plugin to use Sortable.js

Gathering detailed insights and metrics for livewire-sortable

livewire-sortable - 1.0.0 | npmpackage.info

livewire-sortable

A plugin to bring drag/sort capability to Livewire

1.0.0

543

JavaScript

257.28 kB

1.7

Installations

npm install livewire-sortable

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

20.8.0

NPM Version

10.1.0 Score

88.2

Supply Chain

91.1

Quality

75.3

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

2

Total

28

Closed

19

Merged

7

Issues

Open

0

Total

0

Closed

0

Releases

v0.1.0

Updated on Jan 13, 2020

View All 1 releases

Languages

JavaScript

JavaScript (100%)

Developer

livewire

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

543 Stars

30 Commits

50 Forks

17 Watchers

2 Branches

10 Contributors

Updated on Jul 08, 2025

Maintainers

View All 10 Contributors

Package Meta Information

Latest Version

1.0.0

Package Id

livewire-sortable@1.0.0

Unpacked Size

257.28 kB

Size

49.81 kB

File Count

NPM Version

10.1.0

Node Version

20.8.0

Published on

Nov 01, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@babel/core @babel/preset-env @shopify/draggable @testing-library/dom @testing-library/jest-dom babel-jest jest jsdom-simulant rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-filesize rollup-plugin-node-resolve rollup-plugin-terser

Livewire Sortable

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

Installation

CDN

1<script src="https://cdn.jsdelivr.net/gh/livewire/sortable@v0.x.x/dist/livewire-sortable.js"></script>

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.

1<ul wire:sortable="updateTaskOrder">
2    @foreach ($tasks as $task)
3        <li wire:sortable.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
4            <h4 wire:sortable.handle>{{ $task->title }}</h4>
5            <button wire:click="removeTask({{ $task->id }})">Remove</button>
6        </li>
7    @endforeach
8</ul>

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.

1<div wire:sortable="updateGroupOrder" wire:sortable-group="updateTaskOrder" style="display: flex">
2    @foreach ($groups as $group)
3        <div wire:key="group-{{ $group->id }}" wire:sortable.item="{{ $group->id }}">
4            <div style="display: flex">
5                <h4 wire:sortable.handle>{{ $group->label }}</h4>
6
7                <button wire:click="removeGroup({{ $group->id }})">Remove</button>
8            </div>
9
10            <ul wire:sortable-group.item-group="{{ $group->id }}">
11                @foreach ($group->tasks()->orderBy('order')->get() as $task)
12                    <li wire:key="task-{{ $task->id }}" wire:sortable-group.item="{{ $task->id }}">
13                        {{ $task->title }}
14                        <button wire:click="removeTask({{ $task->id }})">Remove</button>
15                    </li>
16                @endforeach
17            </ul>
18
19            <form wire:submit.prevent="addTask({{ $group->id }}, $event.target.title.value)">
20                <input type="text" name="title">
21
22                <button>Add Task</button>
23            </form>
24        </div>
25    @endforeach
26
27    <form wire:submit.prevent="addGroup">
28        <input type="text" wire:model="newGroupLabel">
29
30        <button>Add Task Group</button>
31    </form>
32</div>

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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

41 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh

Score

1.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More