Question

我有一个关于jQuery的问题 - 我正在研究大系统的菜单模拟，所以其他人可以使用它并决定如何更好地组织 - 可用性和用户体验。

所有菜单项都在标签之间分开并且可以拖动。也可以使用jquery ui #connect-lists-through-tabs将它们拖入其他选项卡。我想添加创建新选项卡的可能性，这可以使用相同的jquery ui。但是，无关紧要，我将其附加到新标签中，它不会共享其他标签功能。

这是addTab函数：

function addTab() {
    var label = tabTitle.val() || "Tab " + tabCounter, id = "tabs-"
            + tabCounter, li = $(tabTemplate.replace(/#\{href\}/g,
            "#" + id).replace(/#\{label\}/g, label));
    tabs.find(".ui-tabs-nav").append(li);
    tabs
            .append("<div id='" + id + "'>"
                    + "<ul id='sortable1' class='connectedSortable ui-helper-reset'><li class='ui-state-default'>Im an menu item</li><div class='dragme'>...</div></ul>"
                    + "</div>");
    tabs.tabs("refresh");
    tabCounter++;
}

我创建了包含div的新选项卡，其中包含<ul>类，必须是可排序的等等，但事实并非如此。

按代码将新的<li>项添加到静态选项卡中。

可能有人有任何想法，我该如何解决这个问题？谢谢你的帮助。

Answer 1

要在jquery中启用拖放功能，您需要初始化它。加载页面后你可能会做什么。

所以当你在菜单中添加一个标签时，你还需要初始化这个新元素的拖放功能。

再次从头开始运行拖放功能，它应该可以正常工作。

或者你使用这个addtab函数：

function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter, id = "tabs-"
        + tabCounter, li = $(tabTemplate.replace(/#\{href\}/g,
        "#" + id).replace(/#\{label\}/g, label));
tabs.find(".ui-tabs-nav").append(li);
tabs
        .append("<div id='" + id + "'>"
                + "<ul id='sortable1' class='connectedSortable ui-helper-reset'><li class='ui-state-default'>Im an menu item</li><div class='dragme'>...</div></ul>"
                + "</div>");
tabs.tabs("refresh");

$('#' + id).draggable();
tabCounter++;

}

指定的draggable配置可以找到here

使新标签像静态标签一样

1 个答案: