Question

我在我正在构建的网站上有一个jQuery draggable和droppable区域的问题。我的图像是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
        });
    },

同样适用于停止选项。

如何在单击时停止重新调整大小的jQuery可拖动图像

1 个答案: