动态jquery ui可排序块的索引/位置？答案

【问题标题】：Index/position of dynamic jquery ui sortable blocks?动态jquery ui可排序块的索引/位置？
【发布时间】：2015-01-15 22:22:32
【问题描述】：

不幸的是，我无法在 jsfiddle 中使用它，但也许我忽略了一些东西 (http://jsfiddle.net/bJpyU/46/)。我有动态创建的块，需要保存它们的放置顺序。由于这是设置的动态方式，我无法获取索引（它始终为 0，并且首先开始的块始终显示为第一个索引，无论它被拖动到哪里）。 toArray 和 serialize 显示为空白。我什至试过数第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]);
        }
    });

【问题讨论】：

早期观察：你有sortdiv = 'Graphs'，然后是sortdiv[2]。 sortdiv 应该是一个数组，还是 [2] 一个错误？

标签： javascript jquery jquery-ui indexing jquery-ui-sortable

【解决方案1】：

我认为错误实际上是由于将 sortable 附加到您要排序的每个单独项目。它应该附加到容器 div。

因此，即使它看起来工作正常，但实际上您是在一堆 1 项列表中移动，这些列表始终位于索引 0 处。

通过将sortable 附加到#sortable_portlet_Graphs，我让它像我认为你想要的那样工作。这使得ui.item.index() 返回您在stop 函数中所期望的数字。

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

【讨论】：

救命稻草。非常感谢。