Drag and drop lists

by Rachel Gallen

HTML

<div id="launchPad">
  <div class="card draggable">
    apple
  </div>
  <div class="card draggable">
    orange
  </div>
  <div class="card draggable">
    banana
  </div>
  <div class="card draggable">
    car
  </div>
  <div class="card draggable">
    bus
  </div>
</div>

<div id="dropZone">
  <div class="stack">
    <div class="stackHdr">
      Drop here
    </div>
    <div class="stackDrop1 droppable">

    </div>
  </div>

  <div class="stack">
    <div class="stackHdr">
      Or here
    </div>
    <div class="stackDrop2 droppable">

    </div>
  </div>
</div>

CSS

body {
  margin: 0;
}

#launchPad {
  width: 200px;
  float: left;
  border: 1px solid #eaeaea;
  background-color: #f5f5f5;
}

#dropZone {
  float: right;
  border: 1px solid #eaeaea;
  background-color: #ffffcc;
}

.card {
  width: 150px;
  padding: 5px 10px;
  margin: 5px;
  border: 1px solid #ccc;
  background-color: #eaeaea;
}

.stack {
  width: 180px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  margin: 20px;
}

.stackHdr {
  background-color: #eaeaea;
  border: 1px solid #fff;
  padding: 5px
}

.stackDrop1,
.stackDrop2 {
  min-height: 100px;
  padding: 15px;
}

JavaScript

$("#launchPad").height($(window).height() - 20);
var dropSpace = $(window).width() - $("#launchPad").width();
$("#dropZone").width(dropSpace - 70);
$("#dropZone").height($("#launchPad").height());

$(".card").draggable({
  appendTo: "#launchPad",
  cursor: "move",
  helper: 'clone',
  revert: "invalid",

});

$("#launchPad").droppable({
  tolerance: "intersect",
  accept: ".card",
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function(event, ui) {
    $("#launchPad").append($(ui.draggable));
  }
});

$(".stackDrop1").droppable({
  tolerance: "intersect",
  accept: ".card",
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function(event, ui) {
    $(this).append($(ui.draggable));
  }
});

$(".stackDrop2").droppable({
  tolerance: "intersect",
  accept: ".card",
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  drop: function(event, ui) {
    $(this).append($(ui.draggable));
  }
});