Javascript Jquery UI可拖放，并可选择大小调整和排序

以下是我在JSFIDLE上的代码：

以下是我的jquery代码：

    $(function() {
        $("#sortable").sortable({
            revert : true
        });
        $(".draggable").draggable({
            connectToSortable : "#sortable",
            helper : "clone",
            revert: function(valid) {
                if(valid) {
                    //alert("Valid");
                    $("ul#sortable li").resizable();
                    $("#sortable").sortable({revert : true  });
                    $("ul, li").disableSelection();
                }
                return !valid;
            }
        });
        $("ul, li").disableSelection();

        $("ul#sortable li").resizable({

        });
    /*   $( "#sortable li" ).droppable({
                activeClass: "ui-state-hover",
                hoverClass: "ui-state-active",
                drop: function( event, ui ) {
                $( this ).addClass( "ui-state-highlight" );
                return false;
                }
        }); */

    });

droppable似乎无法正常工作，即使我对droppable进行了评论，它的功能仍然保持不变

我要做的是：

使项目1、项目2。。。。作为投放容器，facebook或twitter项目可以投放，但一次只能投放一个。例如，如果twitter被投放，则不应允许任何其他项目被投放，甚至twitter

使删除的项目可排序，用户还可以调整项目的大小

任何帮助都将不胜感激