jquery ui draggable stop function on clone

i have 2 lists, one draggable(#object) and one开发者_如何转开发 sortable(#target). i would like to drag a clone to the sortable list and then do some things to the clone once it is in the sortable list.

i've got something up on jsfiddle: http://jsfiddle.net/d8nieldonaldson/smYeh/3/

here's some of the code:

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

any help would be greatly appreciated.

thanks!

You are resizing the li element and not the img!
Anyway, even doing so will resize the helper (using stop) but when inserted the element to the list it'll return to the original, so I've modified the code and added animate to a better user experience ;-) :

(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);

Example link.