拖放，可调整大小和可排序

Question

我想创建一个拖放ui，我可以克隆并缩短和调整dropzone上的元素大小。这就是我所做的。

#panel
{
    width:200px;
    height:400px;
    border:1px solid black;
    margin-right:10px;
    float:right;
}
.square
{
    width:50px;
    height:50px;
    margin-top:10px;
    background:yellow;
}
.square1 {
        width:50px;
    height:50px;
    margin-top:10px;
    background:blue;
}
#panel ol {
    list-style-type:none;
}
#canvas
{
    width:300px;
    height:300px;
    border:1px solid black;
    float:left;
    position:relative;
}


<div id="panel">
   <ol id="sortable">
      <li id="resizable" class="square"> <div></div> </li>
      <li id="resizable" class="square1"><div></div> </li>
   </ol>
 </div>
 <div id="canvas">
 </div>
js
$('.square').draggable ({
    helper:"clone"
});
   $('.square1').draggable  ({
        helper:"clone"
});
$('#canvas').droppable({
    drop: function (e, ui) {
        $(ui.draggable).clone().appendTo($(this));
        $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
        $( "#resizable" ).resizable();
      });
    }

});