Question

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

如您所见，“项目1”显示为ul的第一项，但是萤火虫检查员将其显示为第二项。这种情况发生在我.draggable li并在.sortable上发布时（并非总是！）。在某些时刻，我需要检查li的顺序，显然返回的顺序是在firebug检查员上显示的顺序而不是页面中显示的顺序。

修改： 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>

谢谢你，达里奥

Answer 1

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

你可能会觉得它有点简单，看起来不那么错，使用这样的东西：

<强> Working Example

$('.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
        }
    }
});

jquery-ui sortable / draggable order：奇怪的行为

1 个答案: