Javascript 如何使新的JqueryUI选项卡实例可拖放？

$（文档）.ready（函数（）{
var tabTitle=$（“#tab_title”），
tabContent=$（“#tab_content”），
tabTemplate='
删除选项卡，
tabCounter=$（'#tabs'）。子项（'div'）。长度+1，
feedTemplate=''；
var tabs=$（'#tabs'）.tabs（）；
var feeds=$（'#tabs'）.children（'div'）；
//模态对话框初始化：自定义按钮和“关闭”回调重置表单内部
变量对话框=$（“#对话框”）。对话框({
自动打开：错误，
莫代尔：是的，
按钮：{
添加：函数（）{
addTab（）；
$（此）.dialog（“关闭”）；
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
},
关闭：函数（）{
表单[0]。重置（）；
}
});
//AddTab表单：在提交时调用AddTab函数并关闭对话框
var form=dialog.find（“form”）.on（“submit”，函数（事件）{
addTab（）；
dialog.dialog（“关闭”）；
event.preventDefault（）；
});
//实际addTab函数：使用上面表单中的输入添加新选项卡
函数addTab（）{
var label=tabTitle.val（）| |“Tab”+tabCounter，
id='制表符-'+制表符计数器，
li=$（tabTemplate.replace（/\\{href\}/g，'.\''+id）。replace（/\\{label\}/g，label）），
tabContentHtml=tabContent.val（）| |“Plop Tab”+tabCounter+contentz；
tabs.find（'.ui-tabs-nav'）.append（li）；
tabs.append（“”+tabContentHtml+“删除提要”）；
tabCounter++；
//不起作用
//$（“.elements”）.dropable（“选项”、“接受”、“特殊”）；
//$（“.elements”）.dropable({
//接受：“.element”
//                 });
制表符。制表符（“刷新”）；
}
//AddTab按钮：只需打开对话框
$（“#添加#选项卡”）
.按钮（）
.on（“单击”，函数（）{
dialog.dialog（“打开”）；
});
//关闭图标：单击删除选项卡
选项卡上（“单击”，“span.ui图标关闭”，函数（）{
var panelId=$（this.closest（“li”）.remove（）.attr（“aria控件”）；
$（“#”+panelId）.remove（）；
制表符。制表符（“刷新”）；
});
//关闭图标：单击删除提要
feed.on（“单击”，“span.ui图标关闭”，函数（）{
$（this.parent（）.remove（）；
});
选项卡打开（“键控”，功能（事件）{
if（event.altKey&&event.keyCode===$.ui.keyCode.BACKSPACE）{
var panelId=tabs.find（“.ui-tabs-active”）.remove（）.attr（“aria-controls”）；
$（“#”+panelId）.remove（）；
制表符。制表符（“刷新”）；
}
});
$（'.elements'）.children（）.draggable({
附于：'正文'，
不透明度：0.9，
助手：“克隆”，
zIndex:1000，
库索拉特：{
左:50,，
前20名
},
});
//落针元件
$（'.elements'）。可拖放({
接受：'.element'，
公差：“指针”，
activeClass:“可以放下”，
悬停类：“放在这里”，
drop：函数（事件、用户界面）{
$（this.append（ui.draggable[0]）；
//var计数=$（“#tabs-1 div”）。长度；
log（'l:'+$（this.children（）.length））；
}
});
//下降
$（'ul.ui tabs nav'）.children（）.dropable({
接受：'.element'，
公差：“指针”，
结束：功能（事件、用户界面）{
$（“#tabs”）.tabs（“选项”、“活动”、“事件.目标）.index（））；
log（'plop:'+$（event.target.index（））；
$.ui.ddmanager.prepareOffsets（ui.draggable.draggable（'instance'））；
}
})
});
：根目录{
--main-color-level-1:#EEE C；
--main-color-level-2:#缩写81；
--main-color-level-3:#3B1E2D；
--main-color-level-4:#700；
--main-color-level-5:#FF7F00；
--main-color-level-6:#3d3644；
--main-color-level-7:#FF5400；
--main-color-level-8:#bbb；
--main-color-level-9:#333；
--main-color-level-10:#444；
}
.ui图标关闭{
光标：指针；
浮动：对；
保证金：2倍；
}
@字体{
字体系列：系统；
字体风格：普通；
字体大小：300；
src:local（“.SFNSText Light”），
本地（“HelveticaNeueDeskInterface灯”），
本地（“LucidaGrandeUI”），
本地（“Ubuntu”），
本地（“Segoe UI灯”），
本地（“机器人灯”），
本地（“机器人”），
本地（“塔荷马”）；
}
身体，
.ui小部件{
/*字体系列：“系统”！重要*/
/*背景：var（--main-color-level-9）*/
/*颜色：var（-main-color-level-1）*/
/*颜色：#EEEEE C*/
/*字体系列：Arial、helvetica、无衬线字体*/
}
/*工具提示*/
标签{
显示：内联块；
宽度：5em；
}
.ui工具提示，
.阿罗：之后{
背景：黑色；
边框：2件套
function addTab() {
    var label = tabTitle.val() || 'Tab ' + tabCounter,
        id = 'tabs-' + tabCounter,
        li = $(tabTemplate.replace(/#\{href\}/g, '#' + id).replace(/#\{label\}/g, label)),
        tabContentHtml = tabContent.val() || 'Plop Tab ' + tabCounter + ' contentz.';

    tabs.find('.ui-tabs-nav').append(li);

    // Create draggableContent element
    var draggableContent = $('<div class="elements grid nws-tab-feeds nws-tab-feeds-col ui-tabs-panel ui-corner-bottom ui-widget-content ui-droppable"><div class="element grid-item outerContainer-col outerContainer ui-draggable ui-draggable-handle">' + tabContentHtml + '<span class="ui-icon ui-icon-close" role="presentation">Remove feed</span></div></div>');
    var parentDraggableContent = $('<div class="ui-tabs-panel ui-corner-bottom ui-widget-content" id="' + id + '"></div>');
    parentDraggableContent.append(draggableContent);
    tabs.append(parentDraggableContent);

    tabCounter++;

    // Call draggable for tabContentHtml
    draggableContent.draggable({
        cursor: 'move',
    });

    // Call droppable for tab 
    li.droppable({
        accept: '.element',
        tolerance: 'pointer',
        activeClass: "can-drop",
        hoverClass: "drop-here",
        drop: function(event, ui) {
            $(this).append(ui.draggable[0]);
            // var count = $("#tabs-1 div").length;
            console.log('l: ' + $(this).children().length);
        }
    });

    tabs.tabs("refresh");
}