drag and drop sortable

drag and drop sortable

by Simplybj

HTML

<div class="sortable">
  <div class="group-caption">
    <h4>PARENT #1</h4>
    <div class="move">+</div>
    <div class="group-items">
      <div class="group-item">CHILD #1
        <div class="move">+</div>
      </div>
      <div class="group-item">CHILD #2
        <div class="move">+</div>
      </div>
    </div>
  </div>

  <div class="group-caption">
    <h4>PARENT #2</h4>
    <div class="move">+</div>
    <div class="group-items">
      <div class="group-item">CHILD #3
        <div class="move">+</div>
      </div>
      <div class="group-item">CHILD #4
        <div class="move">+</div>
      </div>
    </div>
  </div>

  <div class="group-caption">
    <h4>PARENT #3</h4>
    <div class="move">+</div>
    <div class="group-items">
      <div class="group-item">CHILD #5
        <div class="move">+</div>
      </div>
      <div class="group-item">CHILD #6
        <div class="move">+</div>
      </div>
    </div>
  </div>

  <div></div>

</div>
<div class="newItem">
  <div class="group-items">
    <div class="group-item">CHILD #3
      <div class="move">+</div>
    </div>
    <div class="group-item">CHILD #4
      <div class="move">+</div>
    </div>
  </div>
</div>

CSS

.group-caption {
  background: #D3CAAF;
  width: 400px;
  display: block;
  padding: 20px;
  margin: 0 0 15px 0;
}

.group-item {
  background: #5E5E5E;
  width: 300px;
  height: 30px;
  display: block;
  padding: 3px;
  margin: 5px;
  color: #fff;
}

.move {
  background: #ff0000;
  width: 30px;
  height: 30px;
  float: right;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  line-height: 30px;
  font-family: Arial;
  cursor: move;
}

.movable-placeholder {
  background: #ccc;
  width: 400px;
  height: 100px;
  display: block;
  padding: 20px;
  margin: 0 0 15px 0;
  border-style: dashed;
  border-width: 2px;
  border-color: #000;
}

.movable-children {
  background: #ccc;
  width: 310px;
  height: 40px;
  display: block;
  padding: 5px;
  border-style: dashed;
  border-width: 2px;
  border-color: #000;
}

.newItem {
  height: 200px;
  width: 200px;
  background-color: red;
}

.new {
  height: 20px;
  width: 20px;
  background-color: aqua;
  margin: 10px;
}

JavaScript

$(document).ready(function() {

  // Sort the parents
  $(".sortable").sortable({
    containment: "parent",
    items: "> div",
    handle: ".move",
    tolerance: "pointer",
    cursor: "move",
    opacity: 0.7,
    revert: 300,
    delay: 150,
    dropOnEmpty: true,
    placeholder: "movable-placeholder",
    start: function(e, ui) {
      ui.placeholder.height(ui.helper.outerHeight());
    }
  });

  // Sort the children
  $(".group-items").sortable({
    containment: "document",
    items: "> div",
    connectWith: ['.group-items', '.new'],
    placeholder: "movable-children"
  });
  $(".new").sortable();

})