Предотвращение клонирования, плавающего при обмене элементами с помощью jQuery UI

Question

Я использую jQuery draggable/droppable для включения элементов в сетке. Например, когда элемент 1 отбрасывается на элемент 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.