動態jQuery UI可排序塊的索引/位置？

Question

不幸的是，我無法在jsfiddle中使用它，但是也許我忽略了一些東西（ http://jsfiddle.net/bJpyU/46/ ）。 我有動態創建的塊，需要保存它們的放置順序。 由於設置的動態方式，我無法獲取索引（它始終為0，並且無論從何處拖動，始終將第一個開始的塊始終顯示為第一個索引）。 toArray和序列化顯示為空白。 我什至試過數第n個孩子。 知道如何獲得訂單嗎？

HTML

<div class="tab-pane active col-lg-12" id="portlet_tab_Graphs">
    <div class="row padLR sortable_portlets" id="sortable_portlet_Graphs">

        <div class="col-lg-4 sortable sortable_portlet_Graphs_column ui-sortable" id="102">
            <div class="portlet box yellow">
                <div class="portlet-title">Monthly License Revenue</div>
            </div>
            <div class="portlet-body clearfix pad">
                <div id="h1_sortable_portlet_Graphs_102"></div>
                <div id="sortable_portlet_Graphs_102">
                    <div class="col-lg-12 nPad"> 
                        <div class="btn-group chartToggle inline">Graph Data</div>
                    </div>
                </div>
            </div>
        </div>        
        <div class="col-lg-4 sortable sortable_portlet_Graphs_column ui-sortable" id="103">
            <div class="portlet box blue">
                <div class="portlet-title">Yearly License Revenue</div>
            </div>
            <div class="portlet-body clearfix pad">
                <div id="h1_sortable_portlet_Graphs_102"></div>
                <div id="sortable_portlet_Graphs_102">
                    <div class="col-lg-12 nPad"> 
                        <div class="btn-group chartToggle inline">Graph Data</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

JQUERY

var sortdiv = "Graphs"
var blockClasses = "col-lg-4";

    $(".sortable_portlet_" + sortdiv[2] + "_column").sortable({
        connectWith: ".sortable_portlet_" + sortdiv[2] + "_column",
        handle: ".portlet-title",
        //placeholder: "dragColumn",
        forceHelperSize: true,
        forcePlaceholderSize: true,

        start: function (e, ui) {
            ui.placeholder.height(ui.helper.outerHeight());
            ui.placeholder.width(ui.helper.outerWidth());

            // get original block size
            blockClasses = ui.item.parent().attr('class');
        },
        stop: function (e, ui) {
            var parent = ui.item.parent();

            blockWidth = blockClasses.split(" ");

            parent.attr('class', function (i, c) {
                return c.replace(/(^|\s)col-lg-\S+/g, blockWidth[0]);
            });

            //console.log(ui.position)
            SavePortletDrop(sortdiv[2]);
        }
    });

Answer 1

我認為錯誤實際上是由於將sortable附加到要排序的每個單獨項目上。 它應該附加到容器div。

因此，即使看起來像在工作，您實際上仍在繞過一堆始終位於索引0的1項列表。

我通過將sortable附加到#sortable_portlet_Graphs使它像我想的#sortable_portlet_Graphs 。 這使ui.item.index()返回您在stop函數中期望的數字。

http://jsfiddle.net/bJpyU/47/