Web Development with jQuery®

Customizing Sortable (^) ❘ 351
width: 48px;
height: 48px;
background: url('images/Safari Document.png')
no-repeat;
}
h5.finderCategoryFileTitle,
div.finderCategoryFilePath {
padding-left: 55px;
}
li.finderCategoryFileSelected {
background: rgb(24, 67, 243)
url('images/Selected Item.png')
repeat-x
bottom;
color: white;
}
li.finderCategoryFileSelected a {
color: lightblue;
}
.finderCategoryFilePlaceholder {
background: rgb(230, 230, 230);
height: 58px;
}
Starting with the JavaScript fi le you created in Example 13-1.js, make the following modifi cations
and save the new JavaScript fi le as Example 13-2.js:
$(document).ready(
function()
{
var selectedFile;
$('li.finderCategoryFile').mousedown(
function()
{
if (selectedFile && selectedFile.length)
{
selectedFile.removeClass('finderCategoryFileSelected');
}
selectedFile = $(this);
selectedFile.addClass('finderCategoryFileSelected');
}
);
$('ul#finderCategoryFiles').sortable({
connectWith : 'ul#finderOtherCategoryFiles',
placeholder : 'finderCategoryFilePlaceholder',
opacity : 0.8,
cursor : 'move'
});
$('ul#finderOtherCategoryFiles').sortable({
connectWith : 'ul#finderCategoryFiles',
placeholder : 'finderCategoryFilePlaceholder',
http://www.it-ebooks.info