Два разных поведения с помощью Draggable UI helper clone и non-clone, что происходит?

Question

С моей точки зрения, вспомогательная опция с Draggable UI - это только эффект отображения, как описано here.

Но при использовании его с таблицами он, похоже, прослушивается (положение присоединения неверно).

Пример: http://jsfiddle.net/hmj83/

$(".no_clone_item").draggable({ 
    revert: 'invalid' 
}); 

$(".clone_item").draggable({ 
    helper: 'clone', 
    revert: 'invalid' 
}); 

$("td").droppable({ 
    drop: function (event, ui) { 
     $(ui.draggable).appendTo(this); 
    } 
}); 

Может кто-нибудь объяснить это поведение или дать обходной путь/исправить?

Спасибо.

Answer 1

Предлагаемое решение Tim's работало, но я потерял некоторые функции, когда был реализован в моем приложении.

Вместо этого я хранил вспомогательный клон и просто скрывал оригинал, перетаскивая его и перерисовывая его, когда перетаскивание остановилось.

draggable({ 
    start: function(event, ui) { 
     $(this).hide(); 
    }, 
    stop: function(event, ui) { 
     $(this).show(); 

    } 
}); 

Answer 2

Я считаю, что самым простым было бы сбросить позиционирование с помощью CSS на .drop().

ui.draggable.css({ left: 0, top: 0 }).appendTo(this); 

Это, по крайней мере, решит вашу проблему.

ПРИМЕЧАНИЕ: ui.draggable - текущий перетаскиваемым элемент, объект JQuery.

ДЕМО: http://jsfiddle.net/tive/mJkd5/

Причина, почему JQuery UI добавляет CSS свойство top и left к перемещенному элементу только для визуальной обратной связи. Вы можете проверить это в своем решении, добавив следующий CSS:

td img.no_clone_item { 
    left: auto !important; 
    top: auto !important; 
} 

С помощью этого CSS вы не получаете визуальной обратной связи. Только при удалении элемент будет визуально перемещаться.

Когда .draggable() получает элемент клона, позиция добавляется к клонированному элементу для визуальной обратной связи.