Customizing Sortable (^) ❘ 347
This is actually not the most effi cient way to implement selection, especially if you have a long list.
Selecting every
the list. So having shown you the wrong way to do a selection, a better approach is to create a vari-
able, and every time a selection is made, store the currently selected element in that variable. The
following code is what this approach looks like in the context of Example 13-1:
$(document).ready(
function()
{
var selectedFile;
$('li.finderCategoryFile').mousedown(
function()
{
if (selectedFile && selectedFile.length)
{
selectedFile.removeClass('finderCategoryFileSelected');
}
selectedFile = $(this);
selectedFile.addClass('finderCategoryFileSelected');
}
);
$('ul#finderCategoryFiles').sortable();
}
);
The selected item is stored in the variable selectedFile. When the mousedown event fi res, the script
fi rst checks to see if there is an element stored in the selectedFile variable. If there is, the finder-
CategoryFileSelected class name is removed from that element because that element is the previ-
ously selected element.
Then the element on which the mousedown event is being fi red, referenced by the this keyword, is
made into a jQuery object by wrapping this in a call to the dollar sign function, and the class name
finderCategoryFileSelected is added to the element on which the mousedown event is being fi red.
This provides you with a leaner, more effi cient selection API.
The last item that happens in the script (and the point of this example) is to make every
sortable with a call to the sortable() method:
$('ul#finderCategoryFiles').sortable();
The next section introduces some customization into the discussion of the Sortable plugin.
Customizing Sortable
This section talks about some visual tweaks you can make to sortable lists and how you link one
list to another so that you have sorting between multiple, separate lists. The jQuery UI sort-
able() method, like draggable() and droppable(), enables you to specify an object literal as its fi rst