0

li将 a从 a拖到另一个时，我发现了一个奇怪的行为ul：

打印屏幕

如您所见，“第 1 项”显示为 的第一项ul，但萤火虫检查器将其显示为第二项。当我采取.draggableli 并在 a 上释放时会发生这种情况.sortable（并非总是如此！）。有时我需要检查 的顺序li，显然返回的顺序是萤火虫检查器上显示的顺序，而不是页面中显示的顺序。

编辑： jsFiddle

js：

$('ul.draggable li').draggable({ 
    connectToSortable: ".sortable", 
    helper: function(event) {
        return $('<span class="t3Helper" />')
                .text($(this).text());
      },
    revert: "invalid",
    cursorAt: { top: 0, left: 0 }
});

$('ul.sortable').sortable({ 
    placeholder: "sortable-placeholder",
    helper: "clone",

    connectWith: ".sortable",
    cursorAt: { top: 0, left: 0 },
    update: function() { 
        if($('.draggable').children().length == 0 && last) {
            $('.draggable').after('<button type="button" class="btn btn-primary btn-large pull-right" id="btnVerify">Verifica</button>');
            $('#btnVerify').on('click', checkClosure);
            $('.draggable').hide();
            last = false;
        }
    },
    receive: function (event, ui) { // add this handler
        if(!ui.sender.hasClass("sortable")) {
            $(this).data().sortable.currentItem.attr("id", ui.sender.attr('id'));
            $(ui.item).detach(); // remove original item
        }
    }
});

相关的html（编辑）：

<div class="main" id="t3_container" style="display: block;">
    <div id="exercise">
        <div id="table" style="display: block;">
            <table>
                <thead>
                    <tr class="exerciseTitle">
                        <th colspan="2">Title</th>
                        <th class="originalList">&nbsp;</th>
                    </tr>
                    <tr class="groupTitle">
                        <th class="g0">Col1</th>
                        <th class="g1">Col2</th>
                        <th class="originalList">&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="group">
                            <ul id="g0" class="sortable ui-sortable"></ul>
                        </td>
                        <td class="group" style="border-right: none;">
                            <ul id="g1" class="sortable ui-sortable"></ul>
                        </td>
                        <td>
                            <ul class="draggable">
                                <li id="s28.001" class="v138 g1 ui-draggable" style="display: list-item;">Item1</li>
                                <li id="s24.003" class="v132 g1 ui-draggable" style="display: list-item;">Item2</li>
                                <li id="s10.203" class="v69 g0 ui-draggable" style="display: list-item;">Item3</li>
                                <li id="s24.403" class="v134 g1 ui-draggable" style="display: list-item;">Item4</li>
                                <li id="s10.103" class="v68 g0 ui-draggable" style="display: list-item;">Item5</li>
                                <li id="s10.003" class="v67 g0 ui-draggable" style="display: list-item;">Item6</li>
                            </ul>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

谢谢你，达里奥

4

1 回答 1

1

使用连接的可排序而不是使用可排序和可拖动可能是值得的。

您可能会发现它更简单一些，并且看起来更少错误，使用类似这样的东西：

工作示例

$('.sortable1').sortable({
    placeholder: "sortable-placeholder",
    connectWith: ".sortable",
    helper: 'clone',
    revert: "invalid",
    cursorAt: {
        top: 0,
        left: 0
    },
    update: function () {
        var last = true;
        if ($('.sortable1').children().length === 0 && last) {
            $('.sortable1').after('<button type="button" class="btn btn-primary btn-large pull-right" id="btnVerify">check</button>');
            $('#btnVerify').on('click', checkClosure);
            $('.sortable1').hide();
            last = false;
        }
    }
});

$('.sortable').sortable({
    placeholder: "sortable-placeholder",
    helper: "clone",

    connectWith: ".sortable",
    cursorAt: {
        top: 0,
        left: 0
    },

    receive: function (event, ui) { // add this handler
        if (!ui.sender.hasClass("sortable")) {
            $(this).data().sortable.currentItem.attr("id", ui.sender.attr('id'));
            $(ui.item).detach(); // remove original item
        }
    }
});
于 2013-09-04T16:04:06.690 回答