Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html lang="en"><head>
  <title>jQuery UI Sortable</title>
  <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
  <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
​
 <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
  
<!-- BROKEN VERSION
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
-->
​
  
  <style>
    #sort-wrapper { overflow: hidden; width: 550px; }
    .sortables { width: 2500px; }
    .ui-sortable { float: left; list-style-type: none; margin: 0; padding: 0; width: 450px; height: 325px; }
    .ui-sortable:first-child { margin-left: 60px }
  .ui-sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
  </style>
</head>
<body style="cursor: auto;">
<div class="demo ui-clearfix">
​
  <div id="sort-wrapper">
    <div class="sortables">
<ul class="ui-sortable" id="sort-1">
  <li class="ui-state-default">1</li>
  <li class="ui-state-default">2</li>
  <li class="ui-state-default" style="">3</li><li class="ui-state-default" style="">4</li>
  <li class="ui-state-default">5</li>
  <li class="ui-state-default" style="">6</li>
  
  
  
  
  <li class="ui-state-default" style="">7</li><li class="ui-state-default">8</li>
  <li class="ui-state-default" style="">9</li><li class="ui-state-default" style="">10</li><li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
  
</ul>
​
<ul class="ui-sortable" id="sort-2">
      <li class="ui-state-default">13</li>
  <li style="" class="ui-state-default">14</li><li class="ui-state-default" style="">15</li>
  <li class="ui-state-default">16</li>
  <li class="ui-state-default" style="">17</li><li class="ui-state-default">18</li>
  
  
  <li class="ui-state-default">19</li>
  <li class="ui-state-default">20</li><li class="ui-state-default" style="">21</li>
  
  <li class="ui-state-default">22</li>
  <li class="ui-state-default">23</li>
    <li class="ui-state-default">24</li>
</ul>
<ul class="ui-sortable" id="sort-3">
  <li class="ui-state-default">25</li>
  <li style="" class="ui-state-default">26</li><li class="ui-state-default" style="">27</li><li class="ui-state-default">28</li><li class="ui-state-default" style="">29</li>
  <li class="ui-state-default" style="">30</li><li class="ui-state-default">31</li>
  <li class="ui-state-default">32</li>
  <li class="ui-state-default">33</li>
  
  <li class="ui-state-default">34</li><li style="" class="ui-state-default">35</li>
  <li class="ui-state-default">36</li>
  
  
  
</ul>
    </div>
  </div>
​
</div>
​
​
</body></html>
 
$(function() {
  $( ".ui-sortable" ).sortable({
    connectWith: '.ui-sortable',
    over: function() {
      var wrapper = $('#sort-wrapper');
      var leftPos = $(this).position().left;
      var leftScroll = wrapper.scrollLeft();
      
      if(!wrapper.is(':animated')) {
          wrapper.animate({
            scrollLeft: leftScroll + leftPos - 85
          }, 500);
      }
    }
  }).disableSelection();
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers