Making a List Sortable (^) ❘ 345
left: 0 ;
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 ;
}
Each
fl oating of each fi le icon (the
element with class name finderCategoryFileIcon). Without this
declaration, you’d have a jumbled unintelligible mess, as each element tried to fl oat up to the
right of the icon of the preceding element, and the element preceding that one fl oat up to
the right of the icon of the element before that one, and so on. The clear: both declaration
cancels fl oating so that the icon fl oats to the left, and only the text content within the element
fl oats up to the right of that icon.
Each element is given a fi xed width of 290 pixels. You do this because when you drag a
element, the element loses its width and shrinks. It does that because without an explicit width, each
element’s width is based on the parent,
declaration, you’d have a jumbled unintelligible mess, as each
right of the icon of the preceding
the right of the icon of the
cancels fl oating so that the icon fl oats to the left, and only the text content within the
fl oats up to the right of that icon.
Each
element, the element loses its width and shrinks. It does that because without an explicit width, each
- , element’s width. When you drag an
- element,
its parent is no longer the- element but the element. The
- element is moved with the
mouse cursor through CSS. It is positioned absolutely, relative to the viewport, and its position is
constantly updated based on where the mouse cursor is going via the jQuery UI Sortable plugin.
Otherwise, as an absolutely positioned element, the - element would have a shrink-to-fi t width,
so by giving the - element a fi xed width, you allow it to maintain its dimensions as it is dragged
from one point to another. The min-height property keeps the spacing within the - element con-
sistent but also allows each - element to expand vertically to accommodate additional
text content.
li.finderCategoryFile {
clear: both;
padding: 5px 5px 10px 5px;
min-height: 48px;
width: 290px;
}
The next item of interest in the style sheet is the icon, which is defi ned by the following rule:
div.finderCategoryFileIcon {
float: left;
width: 48px;
height: 48px;
background: url('images/Safari Document.png')
no-repeat;
}
In the preceding rule, theelement is fl oated to the left with the declaration float: left;. That
declaration causes the text content to fl oat to the right of the icon, as explained previously. The
clear: both; declaration of the previous rule cancels this declaration on each- element so that
only the text content is affected. The icon is set as the background using the background property,
[http://www.it-ebooks.info](http://www.it-ebooks.info) - element so that
- element is moved with the