(^352) ❘ CHAPTER 13 SORTABLE
opacity : 0.8,
cursor : 'move'
});
}
);
The preceding gives you something similar to what you see in Figure 13-2.
FIGURE 13-2
In Example 13-2, you added a few options to the sortable() method and tweaked the presentation
of the document to accommodate multiple lists.<div id='finderCategoryFileWrapper'>
<ul id='finderCategoryFiles'>The <div> element contains two <ul> elements; each, in turn, is a sortable list. Each <ul> element is
also made into a column that spans the height of the <div> element. The following CSS is used to
prepare the <div> element so that the <ul> elements within it can become columns.div#finderCategoryFileWrapper {
position: absolute;
top: 0 ;
right: 0 ;
bottom: 23px;
left: 0 ;
}The <div> element is positioned absolutely, and the four offset properties are used to imply width
and height, causing the <div> element to take up the entire viewport, except the bottom 23 pixels.
Then styles are applied to each <ul> element. Each <ul> element is fl oated to the left and given fi xed
dimensions. This styling manages to turn both <ul> elements into columns, matching the visual look
and feel that you saw in Example 13-1, but also managing to work around an annoying z-index bug
in old versions of IE.