Customizing Sortable (^) ❘ 353
ul#finderCategoryFiles,
ul#finderOtherCategoryFiles {
float: left;
height: 100%;
width: 300px;
border-bottom: 1px solid rgb(64, 64, 64);
border-right: 1px solid rgb(64, 64, 64);
background: #fff;
list-style: none;
margin: 0 ;
padding: 0 ;
}
Going to the JavaScript, the scripting portion is straightforward. The fi rst portion of the fi le deals
with selection; as you saw later in the explanation for Example 13-1, a variable called selectedFile
is used to keep track of which fi le is selected. The remainder of the script sets up two sortable lists,
one in each column.
$('ul#finderCategoryFiles').sortable({
connectWith : 'ul#finderOtherCategoryFiles',
placeholder : 'finderCategoryFilePlaceholder',
opacity : 0.8,
cursor : 'move'
});
$('ul#finderOtherCategoryFiles').sortable({
connectWith : 'ul#finderCategoryFiles',
placeholder : 'finderCategoryFilePlaceholder',
opacity : 0.8,
cursor : 'move'
});
The connectWith option accepts a selector as its value and enables you to connect one list to another
so that you have the ability to sort items between multiple lists.
Then, the other options— placeholder, opacity, and cursor— are each used to tweak the presenta-
tion of each sortable list. The placeholder option, as you already learned, enables you to add a
custom class name to the element that acts as a placeholder during sorting. The opacity option is
used to control the opacity of the helper element, and it takes a standard CSS 3 opacity property
value (that works in IE, too). The cursor option is used to change the cursor while the helper is
being dragged, and it takes any value that the CSS cursor property can take.
Also in the preceding snippet of code, the
- list with the id name finderCategoryFiles is con-
nected to the
- list with the id name finderOtherCategoryFiles. The connectWith option speci-
fi ed for this list sets up a one-way connection from the fi rst
- element to the second, which lets
you drag items from the fi rst list to the second, but not vice versa. To have two-way sorting, you
also need to set the connectWith option on the second
- list, which you also see in the preceding
snippet of code. Other than the connectWith option, the second
- element has the
same options as the fi rst
- element.
As mentioned previously, this section discussed only a few of the options for Sortable. All options
for Sortable are documented in Appendix K.
http://www.it-ebooks.info