SORTABLE - Horizontal Images - SCROLLABLE DIV

by bizamajig

HTML

<div class='sequencer'>
  <ul id='sortableList'>
    <li>
      <div class='card bg-1'></div>
      <button>sortable</button>
    </li>
    <li>
      <div class='card bg-3'></div>
      <button>sortable</button>
    </li>
    <li>
      <div class='card bg-5'></div>
      <button>sortable</button>
    </li>
    <li>
      <div class='card bg-7'></div>
      <button>sortable</button>
    </li>
    <li>
      <div class='card bg-9'></div>
      <button>sortable</button>
    </li>
  </ul>
</div>

CSS

.sequencer {
  height: 150px;
  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;
}

.card {
  width: 100px;
  height: 100px;
}

.bg-1 {
  background-color: #511414;
}

.bg-2 {
  background-color: #601F1F;
}

.bg-3 {
  background-color: #702B2B;
}

.bg-4 {
  background-color: #823B3B;
}

.bg-5 {
  background-color: #914D4D;
}

.bg-6 {
  background-color: #A35D5D;
}

.bg-7 {
  background-color: #B27070;
}

.bg-8 {
  background-color: #C18989;
}

.bg-9 {
  background-color: #CEA1A1;
}

.bg-10 {
  background-color: #DDB8B8;
}

.bg-11 {
  background-color: #EFD7D7;
}

JavaScript

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