Jquery droppable

by Chris

HTML

<div id="container">

  <div id="draggable">
    <p>Drag me to my target</p>
  </div>

  <div id="droppable">
    <p>Drop here</p>
  </div>

CSS

#container {
  background: #DDD;
  height: 260px;
  position: relative;
}

#draggable {
  background: #78BA91;
  width: 100px;
  height: 100px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}

#droppable {
  background: #6B7B95;
  width: 150px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
}

JavaScript

$(function() {
  $("#draggable").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      $(this)
        .find("p")
        .after("<div id='droppable'> <p>Drop here</p> </div> ");
    }
  });
});