如何阻止原始 jQuery 可拖动图像在单击时重新调整大小

Question

我正在构建的网站上的 jQuery 可拖动和可放置区域存在问题。我有一张 80x80 的图像。这个想法是单击图像并将其拖动到 div 并将其放入。我需要图像的克隆在单击时将其大小重新调整为 50x50，因此它的大小将与放置框的大小相同掉了。我认为尝试将全尺寸图像放入更小的盒子中太奇怪了。我的脚本正在实现这一点，但它也永久地调整了原始图像的大小。 所以，问题是：如何阻止原始图像（80x80）在单击时被重新调整为 50x50？只有克隆应该重新调整大小。

这是 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;
});
});

这是 jsfiddle 的链接，可以更好地了解完整情况 http://jsfiddle.net/sMRKH/3/

Answer 1

我发明了这个解决方案（某种程度上）：

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

这同样适用于停止选项。