Getting Started
Components
- Animated Number
- Auto Submit
- Carousel
- Character Counter
- Chartjs
- Checkbox Select All
- Clipboard
- Color Picker
- Content Loader
- Dialog
- Dropdown
- Glow
- Lightbox
- Notification
- Password Visibility
- Places Autocomplete
- Popover
- Prefetch
- Rails Nested Form
- Read More
- Remote Rails
- Reveal Controller
- Scroll Progress
- Scroll Reveal
- Scroll To
- Sortable
- Sound
- Textarea Autogrow
- Timeago
Components
Stimulus Sortable
A Stimulus controller to reorder lists with drag-and-drop.
Installation
Install the package
$ yarn add @stimulus-components/sortable sortablejs @rails/request.js
Register the controller in your application
app/javascript/controllers/index.jsimport { Application } from '@hotwired/stimulus' import Sortable from '@stimulus-components/sortable' const application = Application.start() application.register('sortable', Sortable)
This component is based on the SortableJS.
Usage
class Todo < ApplicationRecord
acts_as_list # Or with a custom position system.
end
class TodosController < ApplicationController
def update
# Do what you want with todo_params.
end
private
def todo_params
params.require(:todo).permit(:position)
end
end
In your views:
Basic usage
<ul data-controller="sortable" data-sortable-animation-value="150">
<li>Pet the cat</li>
<li>Get the groceries</li>
</ul>
With custom handler
<ul data-controller="sortable" data-sortable-handle-value=".handle">
<li>
<svg class="handle"></svg>
Pet the cat
</li>
<li>
<svg class="handle"></svg>
Get the groceries
</li>
</ul>
With AJAX call
If you're using @rails/request.js in your application, you can add an url as data-attribute on every items to perform an AJAX call to update the new position automatically on drop.
<ul data-controller="sortable" data-sortable-resource-name-value="todo">
<%= @todos.each do |todo| %>
<!-- <li data-sortable-update-url="/todos/1">Pet the cat</li> -->
<li data-sortable-update-url="<%= todo_path(todo) %>"><%= todo.description %></li>
<% end %>
</ul>
By default, position
will be used as param in a PATCH request. You can change it with the data-sortable-param-name-value
attribute.
If you use data-sortable-resource-name-value
, the name will be used. For instance, todo[position]
.
Configuration
Attribute | Default | Description | Optional |
---|---|---|---|
data-sortable-resource-name-value | undefined | Name of the resource to use as AJAX param. | ✅ |
data-sortable-param-name-value | position | Name of the attribute to use as AJAX param. | ✅ |
data-sortable-response-kind-value | html | The response kind you want for @rails/request.js . | ✅ |
data-sortable-animation-value | 150 | Animation speed moving items when sorting in milliseconds. 0 to disable. | ✅ |
data-sortable-handle-value | undefined | Drag handle selector within list items. | ✅ |
Extending Controller
You can use inheritance to extend the functionality of any Stimulus component:
import Sortable from 'stimulus-sortable'
export default class extends Sortable {
connect() {
super.connect()
console.log('Do what you want here.')
// The sortable.js instance.
this.sortable
// Your options
this.options
// Your default options
this.defaultOptions
}
// You can override the `onUpdate` method here.
onUpdate(event) {
super.onUpdate(event)
}
// You can set default options in this getter for all sortable elements.
get defaultOptions() {
return {
animation: 500,
}
}
}
This controller will automatically have access to targets defined in the parent class.
If you override the connect
, disconnect
or any other methods from the parent, you'll want to call super.method()
to make sure the parent functionality is executed.
Sponsors
Stimulus Component is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support Stimulus Components development on GitHub Sponsors. 🙏
Contributing
Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.
Don't forget to drop a 🌟 on GitHub to support the project.
License
This project is released under the MIT license.