Adding A Sortable List To Wordpress

A sortable list is simply a list of items that can be dragged and dropped to alter the order of those elements.

There are two sortable lists available in Wordpress, one from the JQuery framework and one from the Scriptaculous framework. For a sortable list you will need a list, so here is a simple one.

<ul id="sortcontainer">
	<li class="sortable">Item 1</li>
	<li class="sortable">Item 2</li>
	<li class="sortable">Item 3</li>
	<li class="sortable">Item 4</li>
</ul>

JQuery Sortable

The JQuery sortable control is actually a plugin and not part of the standard JQuery framework. The first thing we need to do is add in the correct JavaScript libraries that we need to use. We do this with the wp_enqueue_script() Wordpress function. The are quite a few different things that are needed so you can use an array to pass in all of the options.

wp_enqueue_script( array("jquery", "jquery-ui-core", "interface", "jquery-ui-sortable", "wp-lists", "jquery-ui-sortable") );

Here is the JavaScript code that is needed to create the sortable list.

<script type="text/javascript">
 jQuery(function($) {
 	
 var smpSortable;
 var smpSortableInit = function() {
  try { // a hack to make sortables work in jQuery 1.2+ and IE7
   $('#sortcontainer').SortableDestroy();
  } catch(e) {}
  smpSortable = $('#sortcontainer').Sortable( {
  accept: 'sortable',
  onStop: smpSortableInit
  } );
 }
 
 // initialize sortable
 smpSortableInit();
});

For more information on the sort of options available have a look at the JQuery Sortables documentation.

Scriptaculous Sortable

To use the Scriptaculous sortable list we add in the scriptaculous-dragdrop library using the wp_enqueue_script() Wordpress function.

wp_enqueue_script("scriptaculous-dragdrop");

Here is the code you need to create the sortable list, you need to include this on the page below the list.

<script type="text/javascript">
  Position.includeScrollOffsets = true;
  Sortable.create('sortcontainer',{
   tag: 'li',
   scroll: window
  });
</script>

For more information on the sort of options available have a look at the Scriptaculous Sortables documentation.

If you only want to run the wp_enqueue_script() function in the admin section of Wordpress you can use the is_admin() function. This returns true if the code is run in the admin section, and false if run on the front end. Using this function you can stop JavaScript libraries being included when you don't use them.

Comments

Hey, I found this article while searching for help with JavaScript. I've recently changed browsers from Google Chrome to Mozilla Firefox 3.1. Just recently I seem to have a issue with loading JavaScript. Everytime I go on a website that needs Javascript, the site does not load and I get a "runtime error javascript.JSException: Unknown name". I can't seem to find out how to fix the problem. Any aid is very appreciated! Thanks
Permalink
nice post, but please change the color of the text or either the background of your site. It's not good for the eyes.
Permalink
@rachel I was actually thinking about a bit of a redesign. Starting with a complete overhaul of the code on the site. What sort of colour scheme do you think I should go for.
Name
Philip Norton
Permalink
This Post is nice, but fairly incomplete without talking about "how to save the new sort order back to database?". There is plenty of text available already that talks about how to attach jQuery Sortable to a UL list. However, a bit of discussion on saving the new sort order on "Save" button-click will add much value the content of this post. Just a thought...
Permalink

Add new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
11 + 8 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.