jQuery UI Current

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<div class="test" id="foo_parent">
      <div class="test" id="foo_0_0">One 1</div>
      <div class="test" id="foo_0_1">One 2</div>
      <div class="test" id="foo_0_2">One 3</div>
      <div class="test" id="foo_0_3">One 4</div>
      <div class="test" id="foo_0_4">One 5</div>
  </div>

  <div class="test" id="bar_parent">    
      <div class="test" id="bar_0_0">Two 1</div>
      <div class="test" id="bar_0_1">Two 2</div>
      <div class="test" id="bar_0_2">Two 3</div>
      <div class="test" id="bar_0_3">Two 4</div>
      <div class="test" id="bar_0_4">Two 5</div>
  </div>
  
  <div class="test" id="baz_parent">  
      <div class="test" id="baz_0_0">Three 1</div>
      <div class="test" id="baz_0_1">Three 2</div>
      <div class="test" id="baz_0_2">Three 3</div>
      <div class="test" id="baz_0_3">Three 4</div>
      <div class="test" id="baz_0_4">Three 5</div>
  </div>

CSS

.test {
      border: 1px solid red;
      margin: 5px;
      padding: 5px;
    }

JavaScript

$('.test').sortable({
    connectWith: '.test'
});
$('.test').disableSelection();