Gathering detailed insights and metrics for livewire-sortable
Gathering detailed insights and metrics for livewire-sortable
Installations
npm install livewire-sortableDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
20.8.0
NPM Version
10.1.0
Languages
1
JavaScript
JavaScript (100%)
Developer
livewire
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
543 Stars
30 Commits
50 Forks
17 Watchers
2 Branches
10 Contributors
Updated on Jul 08, 2025
Maintainers
1
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
7
NPM Version
10.1.0
Node Version
20.8.0
Published on
Nov 01, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
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.
Reason
no binaries found in the repo
Reason
Found 7/18 approved changesets -- score normalized to 3
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 19 are checked with a SAST tool
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