Comment empêcher le redimensionnement de l'image originale déplaçable jQuery lorsque vous cliquez dessus

Question

J'ai un problème avec une zone de dépôt et de dépôt jQuery sur un site que je suis en train de construire. J'ai une image qui est 80x80. L'idée est de cliquer sur une image et de la faire glisser vers une div et de la déposer. J'ai besoin que le clone de l'image soit redimensionné à 50x50 quand il est cliqué, donc il sera de la même taille que la boîte de dépôt quand il est chuté. Je pense que c'est trop bizarre d'essayer de faire tomber l'image en taille réelle dans la boîte beaucoup plus petite. Mon script accomplit cela, mais il redimensionne également l'image originale de façon permanente. Donc, la question est: Comment puis-je arrêter l'image d'origine, qui est de 80x80 d'être redimensionné à 50x50 lorsque l'on clique dessus? Seul le clone doit être redimensionné.

Voici le jQuery:

$(function() { 
// there's the gallery and the trash 
var $gallery = $("#productimage"), 
    $trash = $(".compare-box"); 

// let the gallery items be draggable 
$(".icon", $gallery).draggable({ 
    cancel: "a.ui-icon", 
    // clicking an icon won't initiate dragging 
    revert: "invalid", 
    // when not dropped, the item will revert back to its initial position 
    containment: $("#demo-frame").length ? "#demo-frame" : "document", 
    // stick to demo-frame if present 
    snap: ".compare-box", 
    snapMode: "inner", 
    cursor: "move", 
    helper: "clone", 
    start: function() { 
     $(".ui-draggable").css({ 
      height: 50, 
      width: 50 
     }); 
    }, 
    stop: function() { 
     $(".ui-draggable").css({ 
      height: 50, 
      width: 50 
     }); 
    } 
}); 

// let the trash be droppable, accepting the gallery items 
$trash.droppable({ 
    accept: "#productimage > .icon", 
    activeClass: "ui-state-highlight", 
    drop: function(event, ui) { 
     deleteImage(ui.helper); 
    } 

}); 

// let the gallery be droppable as well, accepting items from the trash 
$gallery.droppable({ 
    accept: "#trash li", 
    activeClass: "custom-state-active", 
    drop: function(event, ui) { 
     recycleImage(ui.draggable); 
    } 
}); 


// image deletion function 
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>"; 

function deleteImage($item) { 
    $item.fadeOut(function() { 
     var $list = $("ul", $trash).length ? $("ul", $trash) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash); 

     $item.find("a.ui-icon-trash").remove(); 
     $item.append(recycle_icon).appendTo($list).fadeIn(function() { 
      $item.animate({ 
       width: "50px" 
      }).find("img").animate({ 
       height: "36px" 
      }); 
     }); 
    }); 
} 

// image recycle function 
var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>"; 

function recycleImage($item) { 
    $item.fadeOut(function() { 
     $item.find("a.ui-icon-refresh").remove().end().css("width", "96px").append(trash_icon).find("img").css("height", "72px").end().appendTo($gallery).fadeIn(); 
    }); 
} 

// image preview function, demonstrating the ui.dialog used as a modal window 
function viewLargerImage($link) { 
    var src = $link.attr("href"), 
     title = $link.siblings("img").attr("alt"), 
     $modal = $("img[src$='" + src + "']"); 

    if ($modal.length) { 
     $modal.dialog("open"); 
    } else { 
     var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />").attr("src", src).appendTo("body"); 
     setTimeout(function() { 
      img.dialog({ 
       title: title, 
       width: 400, 
       modal: true 
      }); 
     }, 1); 
    } 
} 

// resolve the icons behavior with event delegation 
$("ul.gallery > li").click(function(event) { 
    var $item = $(this), 
     $target = $(event.target); 

    if ($target.is("a.ui-icon-trash")) { 
     deleteImage($item); 
    } else if ($target.is("a.ui-icon-zoomin")) { 
     viewLargerImage($target); 
    } else if ($target.is("a.ui-icon-refresh")) { 
     recycleImage($item); 
    } 

    return false; 
}); 
}); 

Voici le lien vers le jsFiddle pour avoir une meilleure idée de l'image complète http://jsfiddle.net/sMRKH/3/

Answer 1

J'ai inventé cette solution (un peu):

start: function() { 
     $(".ui-draggable").not(this).css({ 
      height: 50, 
      width: 50 
     }); 
    }, 

Il en va de même pour l'option d'arrêt.