0

我有一个关于 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>项目添加到静态选项卡中工作正常。

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

4

1 回答 1

0

要在 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++;

}

您可以在此处找到可拖动的指定配置

于 2013-10-01T13:53:40.623 回答