Laravel Blade Sortable

screenshot of Laravel Blade Sortable

Custom Blade components to add sortable/drag-and-drop HTML elements in your apps.

Overview

Laravel Blade Sortable is an innovative package designed to help developers manage the order of items in a simple and intuitive way. Whether you're working with straightforward lists or more complex components, this tool enhances user experience by allowing for seamless drag-and-drop functionality. With real-time notifications for order changes, it fits perfectly into the Livewire ecosystem, making it a valuable addition for those looking to create dynamic web applications.

This package simplifies the previously cumbersome process of sorting items by providing easy-to-use Blade components. By leveraging SortableJs and AlpineJs, Laravel Blade Sortable brings a modern touch to item management, enabling developers to focus on creating rich user interfaces without diving deep into custom JavaScript.

Features

  • Easy Installation: Install the package effortlessly via Composer; make sure to include necessary scripts to get started quickly.
  • Custom Blade Components: Utilizes laravel-blade-sortable::sortable and laravel-blade-sortable::sortable-item components, allowing for flexible sorting implementation without heavy custom coding.
  • Customizable Wrapper Nodes: Change the default behavior by specifying different node types or custom components to fit your application's design requirements.
  • Sort-Key Property: Each sortable item requires a unique sort-key property, ensuring reliable tracking of item order changes.
  • Form Integration: Seamlessly integrates with form inputs; just pass a name prop to track the sort order alongside other form data.
  • Livewire Support: Fully compatible with Livewire, allowing developers to harness its powerful features and create interactive applications effortlessly.
  • Styling Flexibility: Easily customizable styles using CSS frameworks like TailwindCSS to match your application's aesthetic.
  • No JavaScript Required: Achieve complex sorting functionality without the need to write custom JavaScript, streamlining the development process.