Sortable #593

by knospe

HTML

<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>

  
  <ul id="foo"  class="clearfix">
    <li>foo 1</li>
    <li class="clearfix">
      <ul id="foo1"  class="clearfix">
        <li> group 1 - 1</li>
        <li> group 1 - 2</li>
        <li> group 1 - 3</li>
      </ul>
      <ul id="foo2"  class="clearfix">
        <li> group 2 - 1</li>
        <li> group 2 - 2</li>
        <li> group 2 - 3</li>
      </ul>
    </li>
    <li>foo 3</li>
    <li>foo 4</li>
    <li class="ignore">&nbsp;</li>
  </ul>

CSS

ul {
    list-style: none;
    padding: 0;
    display: inline-block;
}

li {
    background: #eee;
    margin: 1px;
    padding: 5px 10px;
    min-height: 100px;
    display: inline-block;
}

.sortable-ghost {
    opacity: .6;
}

#foo1{
    border: 1px solid red;
}
#foo2{
    border: 1px solid blue;
}

#foo li{
    border: 1px solid aqua;
}
#foo li.ignore {
    min-width: 20px;
    min-height: 20px;
    border: none;
    background: none;
    float: right;
}
#foo ul {
    min-width: 20px;
    min-height: 20px;
}
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

JavaScript

Sortable.create(foo, {
  group: {
    name: 'foo',
    put: ['foo2', 'foo1'],
    pull: true,
    filter: '.ignore'
  },
  animation: 100,  
});

Sortable.create(foo1, {
  group: {
    name: 'foo',
    put: ['foo'],
    pull: true
  },
  animation: 100
});

Sortable.create(foo2, {
  group: {
    name: 'foo',
    put: ['foo'],
    pull: true
  },
  animation: 100
});