title: Custom scrolling for jquery ui sortable
body: <p>I have a sortable list of thumbnails. The design calls for custom scroll buttons instead of scrollbars or using the default sortable scroll.</p>
  
  <p>I need to know how to get the list of images to scroll with the left/right buttons.</p>
  
  <p>Here's a fiddle: <a href="http://jsfiddle.net/helto/XESpE/3/" rel="nofollow">http://jsfiddle.net/helto/XESpE/3/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="images"&gt;
  &lt;div id="thumbnails" class="thumbnails"&gt;Current Images:
      &lt;br&gt;
      &lt;div id="list" class="thumbnailList"&gt;&lt;/div&gt;
      &lt;input type="button" id="thumbnavLeft" value="" class="thumbnavLeft"
      /&gt;
      &lt;input type="button" id="thumbnavRight" value="" class="thumbnavRight"
      /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code> .images {
      width: 470px;
      height: 230px;
      float: right;
      /*background-color: #000099;*/
      border: 1px solid #000000;
  }
  .thumbnails {
      width: 430px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 10px;
      position: relative;
  }
  .thumbnavLeft {
      background: url(http://s21.postimage.org/3kjh0954j/ft_imgnav_left.png) no-repeat;
      width: 24px;
      height: 71px;
      cursor: pointer;
      border: none;
      position: absolute;
      top: 20px;
  }
  .thumbnavRight {
      background: url(http://s23.postimage.org/k0ah3rio7/ft_imgnav_right.png) no-repeat;
      width: 24px;
      height: 71px;
      cursor: pointer;
      border: none;
      position: absolute;
      right: 0px;
      top: 20px;
  }
  .thumbnailList {
      background-color: #d0d0d0;
      white-space: nowrap;
      overflow-x: hidden;
      overflow-y: hidden;
      border: 1px solid #000000;
      height: 69px;
      margin: 0px 24px;
  }
  .item {
      background-image: url(http://s14.postimage.org/a4i2upfd9/noimage.jpg);
      background-repeat: no-repeat;
      background-position: top;
      background-size: 100%;
      height: 60px;
      width: 80px;
      visibility: visible;
      left: 0px;
      margin: 4px;
      cursor: pointer;
      display: inline-block;
      border: 1px solid #000000;
      position: relative;
  }
  .thumbClose {
      background: url(http://s14.postimage.org/4dwhupwr1/ft_imgnav_x.png) no-repeat;
      width: 7px;
      height: 9px;
      cursor: pointer;
      border: none;
      position: absolute;
      right: 0;
      padding: 2px;
      margin: 2px;
  }
  .parent {
      height: 80px;
      width: 400px;
  }
  .placeholder {
      height: 40px;
      width: 20px;
      display: inline-block;
      margin: 4px;
  }
  .placeholder {
      height: 1px !important;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>    $(document).ready(function () {
      // testing image thumbnails
      for (var i = 0; i &lt; 10; i++) {
          var $newdiv = $('&lt;div class="item" name="ghost.jpg"&gt;&lt;input type="button" class="thumbClose"/&gt;&lt;/div&gt;');
          $("#list").append($newdiv);
      }
      // initialize sortable thumbnails
      $(function () {
          $('#list').disableSelection().sortable({
              scroll: false,
              placeholder: 'placeholder',
              containment: 'parent',
              axis: 'x'
          });
      });
      $('#list').on('click', 'input', function (event) {
          var fileName = $(this).parent().attr('name');
          $(this).parent().remove();
      });
      $('#thumbnavLeft').on('click', function (e) {
          $('#list').css('left', '50');
      });
  });
  </code></pre>