Question

我正在尝试将jQuery排序，将项目从标签内容移动到另一个div。它工作得很好，但我遇到的问题是我希望该项目返回到它所用的标签。

那就说我有标签：

包含物品的送货地址：
- Street 1
- Street 2
- 市
- 国家
项目属性：
- 行业
- 类型
- 姓名

标签内容占左侧宽度的50％，右侧宽度的50％是div块，我想放弃这些项目。如果我想从div块中删除该项，它应该返回到相关选项卡，例如行业无法回到Shipping Addres，它需要转到属性。

屏幕看起来如何 enter image description here 我的HTML代码：

<div class="row">
    <div class="col-xs-6">
        <ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#Attributes" data-toggle="tab">Attributes</a></li>
            <li><a href="#InvoiceAddress" data-toggle="tab">InvoiceAddress</a></li>
            <li><a href="#ShippingAddress" data-toggle="tab">ShippingAddress</a></li>
        </ul>
        <div id="fields-draggable" class="tab-content">
            <div class="tab-pane connectedSortable ui-sortable active" id="Attributes">
                <button id="field_industry" class="btn btn-primary btn-lg btn-block ui-sortable-handle">industry</button>
                <button id="field_types" class="btn btn-primary btn-lg btn-block ui-sortable-handle">types</button>
                <button id="field_full_name" class="btn btn-primary btn-lg btn-block ui-sortable-handle">full_name</button>
            </div>
            <div class="tab-pane connectedSortable ui-sortable" id="InvoiceAddress">
                <button id="field_street1" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street1</button>
                <button id="field_street2" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street2</button>
                <button id="field_id" class="btn btn-primary btn-lg btn-block ui-sortable-handle">id</button>
                <button id="field_street3" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street3</button>
                <button id="field_postcode" class="btn btn-primary btn-lg btn-block ui-sortable-handle">postcode</button>
                <button id="field_city" class="btn btn-primary btn-lg btn-block ui-sortable-handle">city</button>
                <button id="field_stateId" class="btn btn-primary btn-lg btn-block ui-sortable-handle">stateId</button>
                <button id="field_countryId" class="btn btn-primary btn-lg btn-block ui-sortable-handle">countryId</button>
                </div>
            <div class="tab-pane connectedSortable ui-sortable" id="ShippingAddress">
                <button id="field_id" class="btn btn-primary btn-lg btn-block ui-sortable-handle">id</button>
                <button id="field_street1" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street1</button>
                <button id="field_street2" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street2</button>
                <button id="field_street3" class="btn btn-primary btn-lg btn-block ui-sortable-handle">street3</button>
                <button id="field_postcode" class="btn btn-primary btn-lg btn-block ui-sortable-handle">postcode</button>
                <button id="field_city" class="btn btn-primary btn-lg btn-block ui-sortable-handle">city</button>
                <button id="field_stateId" class="btn btn-primary btn-lg btn-block ui-sortable-handle">stateId</button>
                <button id="field_countryId" class="btn btn-primary btn-lg btn-block ui-sortable-handle">countryId</button>
            </div>
        </div>
    </div>
    <div class="col-xs-6">
        <div id="fields-sortable" class="connectedSortable well ui-sortable" style="min-height: 40px;">
        </div>
    </div>
</div>

和jQuery UI代码：

$("#fields-sortable, #Attributes" ).sortable({
    connectWith: ".connectedSortable",
    placeholder: "btn btn-default btn-lg btn-block",
    cancel: ''
});
$("#fields-sortable, #InvoiceAddress" ).sortable({
    connectWith: ".connectedSortable",
    placeholder: "btn btn-default btn-lg btn-block",
    cancel: ''
});
$("#fields-sortable, #ShippingAddress" ).sortable({
    connectWith: ".connectedSortable",
    placeholder: "btn btn-default btn-lg btn-block",
    cancel: ''
});
$( "#fields-sortable" ).sortable({
    update: function (event, ui) {
        var data = $(this).sortable( "serialize");
        console.log(data);
    }
});

Answer 1

我已设法通过向按钮添加data-tab-id属性并将over事件添加到可排序的

来实现此目的

over: function(event, ui) {
    var overId = $(this).attr('id');
    var elementId = $(event.toElement).data('tab-id');
    if(overId != "fields-sortable" && overId != elementId) {
        var aClick = $("#nav-types").find('a[href="#' + elementId + '"]');
        aClick.click();
    }
}

选项卡内容中的jQuery Sortable已移至另一内容

1 个答案: