A step-by-step guide to implementing drag’n’drop, and image previews with the Filereader API. No libraries or frameworks were harmed in the making of this article.
Tuesday, January 16th, 2018
Monday, October 2nd, 2017
Wednesday, December 14th, 2016
Sunday, February 7th, 2016
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.
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.
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.
Saturday, December 19th, 2015
Matthew describes a very nice bit of progressive enhancement for drag’n’drop file uploads (similar to the CSS Tricks article I linked to recently).
It uses the Dropzone JS which looks like it aligns nicely with the progressive enhancement approach.
Tuesday, December 1st, 2015
This is a terrific example of progressive enhancement in action: going from a simple file input to a lovely interactive drag’n’drop interface.
Sunday, April 28th, 2013
Just as every instance of “the cloud” can be replaced with “the moon” or “my butt”, so too can every instance of the word “markets” in business reporting be replaced with the word “dragons”.
James has got you covered with this bookmarklet to do just that.
The dragons reacted strongly to the news.
Monday, November 15th, 2010
Watch this space. Glenn has a really interesting idea (and implementation) for exchanging structured data between browser windows using drag'n'drop.
Thursday, January 21st, 2010
This thread was supposed to be about dragons!
Friday, April 27th, 2007
Mike and the team have redesigned/realigned Newsvine with some nice customisation of the front page.
Tuesday, January 17th, 2006
Happy Trogday! All your burnination are belong to us.
Tuesday, June 28th, 2005