选项卡内容中的 jQuery 可排序移动到另一个内容

Question

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

假设我有标签：

• 以下物品的收货地址：
  • 1 号街
  • 街道 2
  • 城市
  • 国家
• 项目的属性：
  • 工业
  • 类型
  • 全名

选项卡内容在左侧占 50% 的宽度，右侧占 50% 的宽度是我想要删除项目的 div 块。如果我想从 div 块中删除该项目，它应该返回到相关选项卡，例如行业不能回到 Shipping Addres ，它需要回到 Attributes 。

JSFiddle：http://jsfiddle.net/epxp5L48/

屏幕的样子 我的 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();
    }
}