Set up
Required HTML

Lithium List requires three HTML elements:

  • outerCont: An outer container element.
  • listCont: An inner container for the listItems.
  • listItems: The list items.

This is illustrated here:

List item
List item
List item
List item
List item
List item
List item
List item
List item
List item
List item
List item
List item
EXAMPLE HTML:
<div id='outerCont'>
    <div id='listCont'>
        <div class='listItem'>
            List item
        </div>
        <div class='listItem'>
            List item
        </div>
        <div class='listItem'>
            List item
        </div>
        <div class='listItem'>
            List item
        </div>        
    </div>
</div>
Required CSS

The only required CSS is that listCont must be positioned. That is, it must have position 'relative', 'absolute', 'fixed', or 'sticky'.

EXAMPLE CSS:
#listCont {
    position: relative;
}
Optional CSS
Automatic scrolling

One of Lithium List's key features is its ability to automatically scroll up/down as items are moved towards the top/bottom of the list. For this to work, outerCont must have its height constrained and its overflow style set to 'auto' or 'scroll'.

EXAMPLE CSS:
#outerCont {
    height: 400px;
    overflow: auto;
}
Prevent text selection

To prevent unintended text selection while dragging items, apply user-select: none; with appropriate vendor prefixes.

EXAMPLE CSS:
.listItem {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
Fix bouncing items

If listCont and/or listItems have top/bottom margins, in some browsers items will 'bounce' during sorting and swiping. Applying a top border, even if minimal, to listCont fixes this.

EXAMPLE CSS:
#listCont {
    border-top: 0.1px solid transparent;
}
Attachment

Call attachToList to attach Lithium List to a list:

var outerCont = document.getElementById('outerCont');
var listCont = document.getElementById('listCont');
lithiumlist.attachToList(
    '0123456789',
    outerCont,
    listCont,
    'listItem'
);
window as outerCont

If you want the whole window to scroll when list items are sorted (like the full page scrolling example), you could set var outerCont = window;. This works fine on desktop, but automatic scrolling will be rough and unreliable in some mobile browsers. Instead, it's recommended you wrap the whole page in a DIV and use it as outerCont.

EXAMPLE HTML:
<html>
    <head>
        ...
    </head>
    <body>
        <div id='pageWrapper'>
            <div>
                ...
            </div>
            <div id='listCont'>
                <div class='listItem'>
                    List item
                </div>
                <div class='listItem'>
                    List item
                </div>
                <div class='listItem'>
                    List item
                </div>
                <div class='listItem'>
                    List item
                </div>        
            </div>
            <div>
                ...
            </div>
        </div>
    </body>
</html>
EXAMPLE CSS:
html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#pageWrapper {
    height: 100%;
    overflow: auto;
}
EXAMPLE JS:
var pageWrapper = document.getElementById('pageWrapper');
var listCont = document.getElementById('listCont');
lithiumlist.attachToList(
    '0123456789',
    pageWrapper,
    listCont,
    'listItem'
);