jquery - jQuery UI でアイテムを交換するときにクローンがフローティング バックしないようにする

Question

jQuery のドラッグ可能/ドロップ可能を使用して、グリッド内の要素を交換できるようにしています。たとえば、要素 1 を要素 2 にドロップすると、場所が変わります。

2 つの問題があります。

1. ドラッグ アンド ドロップが成功した後も、クローンは元の位置に戻ります。どうすればこれを防ぐことができますか? 有効なターゲットにドロップされていない場合にのみ、フロートバックしたい.

2. 理想的には私も設定したいのですhelper: originalが、これを試してみると、関数内のスワップされた位置を正しく計算する方法がわかりませんでしたdrop。

コードをjsFiddleに配置し、参照用に以下に示します。

<div id="room"></div>

<script>
$(function() {
//Set up seats - four rows of eight
for (var row = 0; row < 4; row++) {
    for (var col = 0; col < 8; col++) {
        $('#room').append('<div class="seat" style="top: ' + (row * 45 + 15) + 'px; left: ' + (col * 117 + 18) + 'px;">' + (row * 4 + col + 1) + '</div>');
    }
}

//Swap function from http://blog.pengoworks.com/index.cfm/2008/9/24/A-quick-and-dirty-swap-method-for-jQuery
jQuery.fn.swap = function(b) {
    b = jQuery(b)[0];
    var a = this[0];
    var t = a.parentNode.insertBefore(document.createTextNode(''), a);
    b.parentNode.insertBefore(a, b);
    t.parentNode.insertBefore(b, t);
    t.parentNode.removeChild(t);
    return this;
};

$(".seat").draggable({
    revert: true,
    helper: "clone"
});

$(".seat").droppable({
    accept: ".seat",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {

        var draggable = ui.draggable,
            droppable = $(this),
            dragPos = draggable.position(),
            dropPos = droppable.position();

        draggable.css({
            left: dropPos.left + 'px',
            top: dropPos.top + 'px'
        });

        droppable.css({
            left: dragPos.left + 'px',
            top: dragPos.top + 'px'
        });
        draggable.swap(droppable);
    }
});

});
</script>

Answer 1

関数でこれを解決し$(ui.helper).hide();ましたdrop。