jQuery UI.position（）不工作

我正试图使用jQuery UI的

.position（）

函数设置

元素的位置，但我无法让它工作。我希望它们位于可排序的

列表元素的旁边

以下是我的HTML结构：

<div id="#tabs-settings-wrapper">
    <p>You can order them by drag and drop.</p>
    <ul id="tabs-sortable">
        <li class="ui-state-default tabs-sortable-item" id="tab-0" data-position="0">overview</li>
        <li class="ui-state-default tabs-sortable-item" id="tab-1" data-position="1">detail 1</li>
        <li class="ui-state-default tabs-sortable-item" id="tab-2" data-position="2">detail 2</li>
    </ul>

    <button id="tabs-add-new-button">Add new</button>

    <!-- These are created dynamically, see JavaScript below -->
    <span id="tab-0-remove-icon" class="tabs-remove-icon fa fa-trash fa-lg" data-position="0"></span>
    <span id="tab-1-remove-icon" class="tabs-remove-icon fa fa-trash fa-lg" data-position="1"></span>
    <span id="tab-2-remove-icon" class="tabs-remove-icon fa fa-trash fa-lg" data-position="2"></span>

</div>

您可以通过拖放方式对其进行排序


概述
详细信息1
详细信息2

新增

和我的JavaScript代码：

 $(function () {
    $("#tabs-sortable").sortable({
        placeholder: "ui-state-highlight"
    });

    // add remove icons to every li
    $(".tabs-sortable-item").each(function () {
        var position = $(this).data("position");
        var id = "#" + $(this).prop("id");
        var removeIconID = '#tab-' + position + '-remove-icon';
        $('<span id="tab-' + position + '-remove-icon" class="tabs-remove-icon fa fa-trash fa-lg" data-position="' + position + '"></span>').appendTo("#tabs-settings-wrapper");
        $(removeIconID).position({
            my: "right",
            at: "left",
            of: id,
            collision: "none"
        });
    });

    $("#tabs-add-new-button").button().click(function () {
        // numbering seems strange, but is more human-like (and logical)
        var maxPosition = $(".tabs-sortable-item").length - 1;
        var newPosition = maxPosition + 1;

        $('<li class="ui-state-default tabs-sortable-item" id="tab-' + newPosition + '">' +
            '<input id="tabs-add-new-input" style="margin-top: -5px;" placeholder="Enter a name" />' +
        '</li>').appendTo("#tabs-sortable");

        $('<button class="tabs-add-new-save-button" id="tab-' + newPosition + '-save-button" data-position="' + newPosition + '">Save</button>').appendTo("#tabs-settings-wrapper");
        $("#tab-" + String(newPosition) + "-save-button").button();
        $("#tab-" + String(newPosition) + "-save-button").position({
            my: "left",
            at: "right+20px",
            of: "#tab-" + String(newPosition) + ""
        });

        $('<button class="tabs-add-new-cancel-button" id="tab-' + newPosition + '-cancel-button" data-position="' + newPosition + '">Cancel</button>').appendTo("#tabs-settings-wrapper");
        $("#tab-" + String(newPosition) + "-cancel-button").button();
        $("#tab-" + String(newPosition) + "-cancel-button").position({
            my: "left",
            at: "right+10px",
            of: "#tab-" + String(newPosition) + "-save-button"
        });

        var li = $("#tabs-sortable li");
        var innerWidth = li.innerWidth();
        var paddingLeft = li.css("padding-left").substring('p')[1];
        var paddingRight = li.css("padding-right").substring('p')[1];
        $(".tabs-sortable-item input").last().focus().css("width", (innerWidth - (paddingLeft + paddingRight)));

        $("#tabs-sortable").sortable("refresh");

        // prevent the user from adding multiple list items at once
        $("#tabs-add-new-button").button("disable");
    });

});

$（函数（）{
$（“#选项卡可排序”）。可排序({
占位符：“ui状态突出显示”
});
//向每个li添加删除图标
$（“.tabs可排序项”）。每个（函数（）{
var位置=$（此）.data（“位置”）；
var id=“#”+$（this.prop（“id”）；
var removieconid='#制表符-'+位置+'-删除图标'；
$（“”）.appendTo（“#选项卡设置包装器”）；
$（removeIconID）。位置({
我的：“对”，
在“左”，
身份证号码：，
碰撞：“无”
});
});
$（“#选项卡添加新按钮”）。按钮（）。单击（函数（）{
//编号似乎很奇怪，但更像人类（而且更符合逻辑）
var maxPosition=$（“.tabs可排序项”）.length-1；
var newPosition=maxPosition+1；
$（“
”+
'' +
“
”）。附加到（“#制表符可排序”）；
$（'Save'）.appendTo（#制表符设置包装器”）；
$（“#制表符-”+字符串（新位置）+“-保存按钮”）.button（）；
$（“#选项卡-”+字符串（新位置）+“-保存按钮”）。位置({
我的：“左”，
在：“右+20px”，
共有：“#制表符-”+字符串（新位置）+”
});
$（'Cancel'）.appendTo（#制表符设置包装器”）；
$（“#制表符-”+字符串（新位置）+“-取消按钮”）.button（）；
$（“#制表符-”+字符串（新位置）+“-取消按钮”）。位置({
我的：“左”，
在：“右+10px”，
共有：“#制表符-”+字符串（新位置）+“-保存按钮”
});
var li=$（“#制表符可排序li”）；
var innerWidth=li.innerWidth（）；
var paddingLeft=li.css（“padding left”）.substring（'p'）[1]；
var paddingRight=li.css（“padding right”）.substring（'p'）[1]；
$（“.tabs可排序项输入”）.last（）.focus（）.css（“宽度”，“内部宽度-（paddingLeft+paddingRight））；
$（“#选项卡可排序”）。可排序（“刷新”）；
//防止用户一次添加多个列表项
$（“#选项卡添加新按钮”）。按钮（“禁用”）；
});
});

但它们出现在“添加新”按钮之后（在HTML代码中写入），而不是我期望它们出现的位置：

编辑：

我在“添加新”按钮上添加了两个按钮，并对它们进行了定位。我将此代码添加到JavaScript部分。这就是它的样子：

---

我认为在这种情况下，由于

ul

列表，您应该避免使用

position

我宁愿在每个

li

中添加

span

，并在必要时通过代码进行更新/隐藏

<div id="#tabs-settings-wrapper">
    <p>You can order them by drag and drop.</p>
    <ul id="tabs-sortable">
        <li class="ui-state-default tabs-sortable-item" id="tab-0" data-position="0">
            overview 
            <span id="tab-0-remove-icon" class="tabs-remove-icon fa fa-trash fa-lg" data-position="0"></span>
        </li>
        <li class="ui-state-default tabs-sortable-item" id="tab-1" data-position="1">
            detail 1
            <span id="tab-1-remove-icon" class="tabs-remove-icon fa fa-trash fa-lg" data-position="1"></span>
        </li>
        <li class="ui-state-default tabs-sortable-item" id="tab-2" data-position="2">
            detail 2
            <span id="tab-2-remove-icon" class="tabs-remove-icon fa fa-trash fa-lg" data-position="2"></span>
        </li>
    </ul>
    <button id="tabs-add-new-button">Add new</button>
</div>

您可以通过拖放方式对其进行排序



概述


细节1


细节2


新增

---

或者直接在

li

中添加带有代码的

span

（例如，通过

document.getElementById（“tab-1”）.appendChild（span）；

。

我认为这更像是CSS问题。。。但我不知道该尝试什么。要在

ul

旁边正确显示，这将是一件棘手的事情。你为什么不把它们放在

而不是使用

位置

？我也考虑过这一点，我可能最终会得到这个版本，但我在单击添加新按钮时添加了两个按钮，设置它们的位置似乎很有效。我将把这段代码添加到我的问题中。挑战是在列表项旁边添加内容。实际上，我意识到我需要使用可排序的

元素，因为我需要提供比名称更多的信息。因此，我必须重新考虑的风格，其中包括删除图标的位置。不过，谢谢你试着帮助我！