Adding A Sortable List To Wordpress

19th February 2009 - 3 minutes read time

Note: This post is over a year old and so the information contained here might be out of date. If you do spot something please leave a comment and I will endeavour to correct.

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.

PHP

Comments

Permalink

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.

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...

Add new comment

Related Content

Create Checksums Using The Luhn Algorithm In PHP

The Luhn algorithm was created by Hans Peter Luhn and is a way of creating a simple checksum for a number. This algorithm, also known as the mod 10 algorithm, is used in a wide variety of applications but is commonly associated with credit card numbers.

If you look at the numbers on the front of your credit card the last digit on the right is the checksum. An algorithm is done on the other numbers and if the checksum is the same then the number is considered valid.

Swapping Between Different Composer Versions

I had an issue I was trying to debug today and needed a way to swap between different versions of composer. Composer is one of the few things that I install globally so it was locked at a particular version on the machine I was using. There has been some significant changes between version 1 and version 2 and it isn't quite safe to use a composer 2 package on a platform that has composer 1 installed. As some projects I'm working on haven't been upgraded yet I needed a way to swap between versions whilst this work was being done.

Creating A Game With PHP Part 4: Side Scrolling Shooter

As another step up from the game of snake I created in my last post I decided to try my hand at creating a side scrolling shooter. Just like my other posts, this is an ASCII based game played on the command line.

A side scrolling shooter, if you didn't already know, moves a scene from right to left across the screen with enemies moving with the scene towards the player's ship, which is on the left hand side of the scene. The player can fire bullets towards the enemies so remove them from the scene.

Seeding Random Numbers in PHP

Computers are not that great at creating random numbers as the methods they use are deterministic. That is, they start from a number (called a seed) and apply maths to that number to generate pseudorandom numbers. Most random numbers generated by computers programs use a seed provided by the system, which is generally the current time. If you can guess the initial value then you can start to work out what the random sequence of numbers generated is. Most random numbers, are therefore not suitable for encryption.

PHP: Find An Array Sequence In An Array

I was looking for a function that searched an array for another array, and after not finding one I decided to write it. What I was looking for was a function that took a smaller array and searched for that exact sequence of items in a larger array. As it happens, PHP does have a number of array search functions, but they didn't produce the correct result.

PHP Live Regex

When creating regular expressions for PHP I tend to use the awesome tool PHP Live Regex.

This tool has really helped me over the last couple of years to create regular expressions for many of the projects I've been working on. Everything from validation functions to formatters that use regular expressions have had their expressions worked out using this tool. I even use it for testing one off expressions where I just need to find/replace in a file.