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>
    </ul>
</div>
<div id="sortable">
    <div>Tab 1</div>
    <div>Tab 2</div>
    <div>Tab 3</div>
    <div>Tab 4</div>
    <div>Tab 5</div>
</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;
    
    }

    .sequencer img {
       
        height:50px;
    }

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



#sortable {
    height: 30px;
    padding: 20px 20px 0 20px;
    background: #eee;
    border-bottom: 1px solid #aaa;
    font-family: arial, verdana;
    font-size: 12px;
}
#sortable div {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    margin: 0 2px;
    background: #fff;
    border: 1px solid #aaa;
    border-bottom: 0;
    float: left;
    cursor: move;
}

JavaScript

$('#sortableList, #sortable').sortable( {
		
    		sort: function (event, ui) {
        	
    		},
        
       
            }).disableSelection();