Enhance’n’drag’n’drop

I’ve spent the last week implementing a new feature over at The Session. I had forgotten how enjoyable it is to get completely immersed in a personal project, thinking about everything from database structures right through to CSS animations,

I won’t bore you with the details of this particular feature—which is really only of interest if you play traditional Irish music—but I thought I’d make note of one little bit of progressive enhancement.

One of the interfaces needed for this feature was a form to re-order items in a list. So I thought to myself, “what’s the simplest technology to enable this functionality?” I came up with a series of select elements within a form.

Reordering

It’s not the nicest of interfaces, but it works pretty much everywhere. Once I had built that—and the back-end functionality required to make it all work—I could think about how to enhance it.

I brought it up at the weekly Clearleft front-end pow-wow (featuring special guest Jack Franklin). I figured that drag’n’drop would be the obvious enhancement, but I didn’t know if there were any “go-to” libraries for implementing it; I haven’t paid much attention to the state of drag’n’drop since the old IE implement was added to HTML5.

Nobody had any particular recommendations so I did a bit of searching. I came across Dragula, which looked pretty solid. It’s made by the super-smart Nicolás Bevacqua, who I know shares my feelings about progressive enhancement. To my delight, I was able to get it working within minutes.

Drag and drop

There’s a little bit of mustard-cutting going on: does the dragula object exist, and does the browser understand querySelector? If so, the select elements are hidden and the drag’n’drop is enabled. Then, whenever an item in the list is dragged and dropped, the corresponding (hidden) select element is updated …so that time I spent making the simpler non-drag’n’drop interface was time well spent: I didn’t need to do anything extra on the server to handle the data from the updated interface.

It’s a simple example but it demonstrates that the benefits of starting with the simpler universal interface before upgrading to the smoother experience.

Have you published a response to this? :

Responses

1 Like

# Liked by Gunnar Bittersmann on Sunday, February 7th, 2016 at 11:00pm

Previously on this day

5 years ago I wrote Hackfarming Blood Buddies

We went into the countryside and we made a thing.

9 years ago I wrote Erase and rewind

The BBC is planning to delete 172 websites.

12 years ago I wrote Foo through

A most pleasant way to spend a weekend.

17 years ago I wrote Don't talk crazy

I had no idea that I had such a crazed look on my face while I was giving my talk the other night.

17 years ago I wrote He likes it, he likes it

Eric Meyer likes my site:

18 years ago I wrote Geekiness

Hey, Moby’s favourite episode of Star Trek: The Next Generation is also *my* favourite episode.

18 years ago I wrote Five Finger Fillet

This is fun in a really gross sort of way: "Five Finger Fillet".