I’ve had the idea in the back of my mind for a while to develop some drag and drop, intuitive editing/reordering type functionality as part of a front-end interface for a CMS. The basic setup is pretty straightforward, by using jQuery, jQuery UI and the HTML "contenteditable" attribute, I was able to set up a multiple column layout that allowed you to edit content on-screen and drag and drop to reorder items.

The first real issue I had to tackle was persisting those changes. In order to do that, I needed to somehow link my reorderable items up to a database. The page would load in the items (including which column they are in and their display order) from the database, then the user could drag and drop to reorder, then those changes would be automatically saved back in to the database.

This is where HTML data attributes and the jQuery .data() method came in handy. HTML5 data attributes allow you to have custom attributes against your HTML elements as long as they are prefixed with “data-“. So, I decided to use “data-arearef” for the column reference and “data-itemref” for an item reference. Using jQuery, I can then keep track of those data attributes.

In order to save changes back in to the database, I get all the areas on the page that have a HTML5 data attribute, then I create a list of the “data-itemref” attributes' values for each item within that area. That means that I can drag and drop to reorder my items, and those changes will be tracked using HTML5 data attributes and the jQuery .data() method, sent back to my .NET app using a jQuery AJAX call and like magic (and some C#, that also helps), it’s all saved!

Read more on HTML5 data attributes, or jQuery data.