jquery UI перетаскиваемая функция остановки на клон

Question

У меня есть 2 списка, один перетаскиваемый (#object) и один сортируемый (#target).я хотел бы перетащить клон в список для сортировки и затем выполнить некоторые действия с клоном, как только он окажется в списке для сортировки.

У меня что-то есть в jsfiddle: http://jsfiddle.net/d8nieldonaldson/smYeh/3/

вот код:

$("#object li").draggable({
    connectToSortable: "#target",
    opacity: 0.5,
    helper: "clone",
    revert: "invalid",
    stop: function(e , ui) {
        ui.helper.css("width" , "140px");
    }
});

любая помощь будет принята с благодарностью.

спасибо!

Answer 1

Вы изменяете размер элемента li, а не img!
В любом случае, даже при этом будет изменен размер помощника (с помощью stop), но при вставке элемента в список он вернется коригинально, поэтому я изменил код и добавил анимацию для лучшего взаимодействия с пользователем ;-):

(function($) {

    $("#target").sortable({
        revert: true,
        update: function(e, ui) {
            if (ui.item.hasClass('ui-draggable')) ui.item.find('img').animate({
                width: "140px"
            })
        }
    });
    $("#object li").draggable({
        connectToSortable: "#target",
        opacity: 0.5,
        helper: "clone",
        revert: "invalid"
    });
    $("ul, li").disableSelection();
})(window.jQuery);

Пример ссылки .