0

liaを aulから別の aにドラッグすると、奇妙な動作が見つかりました。

プリントスクリーン

ご覧のとおり、"Item 1" は の最初の項目として表示されますulが、firebug インスペクタでは 2 番目の項目として表示されます。これは、li を取り、.draggablea でリリースしたときに発生します.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>

ありがとう、ダリオ

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 に答える