SORTABLE - Horizontal Images - SCROLLABLE DIV

HTML

<div class='sequencer'>
    <ul id='sortableList'>
        <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage1</li>
        <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage2</li>
        <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage3</li>
        <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage4</li>
        <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
         <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
          <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
           <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
            <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
             <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
              <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
               <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
                <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
                 <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
                  <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
                   <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
                    <li><img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
    </ul>
</div>

CSS

.sequencer {
        height:110px;
        width:600px;
        overflow-y:hidden;
        overflow-x:hidden;
    }
    .sequencer ul {
        white-space: nowrap;
        overflow-x:scroll;
        overflow-y:hidden;
    }

    .sequencer li {
        display:inline-block;
        padding-right:10px;
        padding-left:10px;
        text-align:center;
    }

    .sequencer img {
        display:block;
        height:50px;
    }

    .placeholder {
        background-color: #f3f3f3;
         padding-right:10px;
         padding-left:10px;
         text-align:center;
         width:50px;
         height:60px;
    }

JavaScript

$(document).ready(function() {
        $('#sortableList').sortable( {
            refreshPositions: true, 
            opacity: 0.6,
            scroll:true,
            containment: 'parent',
            placeholder: 'placeholder',
            tolerance: 'pointer'}).disableSelection();
    });