As a developer, there’s a special kind of satisfaction in finding the perfect package or tool that slots right into your project.
It saves time, solves a complex problem, and lets you focus on building the features that matter most. But sometimes, you find an almost perfect tool. It does 90% of what you need, but that last 10% is a dealbreaker.
For me, that dealbreaker is often accessibility.
A big part of my development philosophy is ensuring that what I build is usable for everyone.
So, when a foundational tool isn’t accessible, it’s more than just an inconvenience—it’s a blocker. That’s the situation I found myself in, and it’s why I ended up building my own solution.
That’s how the ArtisanPack UI Livewire Drag and Drop package came to be.
The Problem with Other Drag and Drop Packages
Ever since I started diving deep into Livewire, I had been using the @wotz/livewire-sortablejs package.
I used it in the early versions of my Digital Shopfront CMS and again in version 2.0 of my personal dashboard app. For the most part, it worked just fine for what I needed.
The problem, however, is that it’s not accessible.
That isn’t the fault of that package’s maintainer. The issue lies with the sortablejs/sortable package it wraps around. The underlying SortableJS library has long-standing accessibility issues. At best, they’ve ignored the problem. At worst, a contributor flatly stated they wouldn’t make it accessible because it was “too complex.”
That just doesn’t work for me.
I’m committed to making sure everything I create is accessible, and that includes the tools and packages I rely on. After reading that comment, I knew what I had to do.
If I wanted a truly accessible drag-and-drop package for Livewire, I was going to have to build it myself.
The Plan for an Accessible Solution
My first thought was to just fork the @wotz/livewire-sortablejs package, but that would be pointless since the core accessibility problem was with the SortableJS library itself.
And forking SortableJS was a non-starter; it’s a complex library, and that would be a massive undertaking.
So, the path forward was clear: I had to build it from the ground up.
I’ll admit, I used Gemini to help brainstorm the approach and create a solid plan. The final plan was refreshingly straightforward: create an npm package with a single src/index.js file to handle all the logic needed to make accessible drag-and-drop functionality work seamlessly with Livewire.
Creating the Package
Honestly, once the plan was in place, creating the package was relatively simple.
I gave Junie, JetBrain’s AI agent, a shot at writing a good portion of the initial code. Since the project was so straightforward, it was a perfect task for it.
That decision dramatically cut down the development time to about an hour.
I made sure it commented the code thoroughly, which allowed me to double-check its work, learn from the implementation, and fully understand how every piece fit together. The whole process felt incredibly smooth.
Testing with a Real-World Application
Testing the package… well, that turned out to be the tricky part.
I first implemented it in a standard drag-and-drop component within the Digital Shopfront CMS, and it worked almost immediately. I was feeling pretty good about it.
But when I started integrating it with the dashboard widgets in Digital Shopfront, I hit a significant snag. I quickly realized that even though I had already released version 1.0, it wasn’t quite ready for prime time.
Oops.
The core problem was a conflict in functionality: I could either add and edit widgets or I could move them around. I couldn’t do both at the same time.
I spent a ton of time trying to fix it.
Finally, with some help from Gemini and Junie, I landed on a solution using a combination of Livewire and Alpine hooks to manage the component states correctly.
And with that, it became a fully accessible drag-and-drop package ready to be used on your next project!
What’s Next for the Package?
So, what’s the future for the ArtisanPack UI Livewire Drag and Drop package?
It will definitely go through more real-world testing as I continue to build out Digital Shopfront, especially for features like a visual editor.
I’m also sure that as more people use it, new bugs will be found and will need to be fixed.
One feature I’d like to add is better visual feedback, so when an item is being dragged, you have a clear idea of where it’s going to land.
Other than that, it feels pretty feature-complete.
It will continue to get updates as needed, especially as Livewire evolves. I promise it won’t become abandonware. I feel like it’s already an excellent and, most importantly, very accessible package that can help empower your next project.
