两个div之间可拖放和可放置并可排序

Question

我一直试图进行拖放式练习，我找到了这个选项http://jsfiddle.net/39khs/82/和http://jsfiddle.net/wj4ak/5/。然而，我需要做的是采取一个div，拖动到另一个div并使其占用该div的所有空间，此外可以对更大的div进行排序（更改顺序）。因此，使用这些示例我做了http://codepen.io/benasl/pen/ORaVVG?editors=0110。我尝试添加一些填充来阻止div，所以我可以把它拿起并在角落里与其他块一起排序，但这不是我需要的。

  $(".draggable").draggable({ cursor: "move", revert: "invalid"});
  $(".block").droppable({ accept: ".draggable", 
       drop: function(event, ui) {
                console.log("drop");
               $(this).removeClass("over");
         var dropped = ui.draggable;
        var droppedOn = $(this);
        $(dropped).detach().css({top:0,left: 0}).appendTo(droppedOn);               }, 
      over: function(event, elem) {
              $(this).addClass("over");
               console.log("over");
      },
      out: function(event, elem) {
              $(this).removeClass("over");
      }
      });
$("#drop").sortable({ cursor: "move"});
$(".inside").droppable({ accept: ".draggable", drop: function(event, ui) {
                console.log("drop");
         var dropped = ui.draggable;
        var droppedOn = $(this);
        $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);   }});