jQuery UIで項目をスワップするときにクローンを浮かべないようにします。

Question

jQuery draggable/droppableを使用して、グリッド内の要素をスワップすることができます。たとえば、要素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

私はdrop機能に$(ui.helper).hide();でこれを解決しました。