Как остановить изменение размера оригинального перетаскиваемого изображения jQuery при нажатии - PullRequest
Новая
       7

Как остановить изменение размера оригинального перетаскиваемого изображения jQuery при нажатии

2 голосов
/ 04 января 2012

У меня проблема с перетаскиваемой и сбрасываемой областью 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/

1 Ответ

1 голос
/ 04 января 2012

Я придумал это решение (вроде): 

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

То же самое относится и к опции остановки.

...