jQuery可拖动在拖动开始时更改图像大小，在还原时恢复原始大小

Question

我有一组divs，所有不同的大小，同一个类.gjg-item。我有它，所以你可以将这些 divs 拖放到彼此的位置。

我如何告诉 jquery 不仅要缩小 dragstart 上的图像，还要将其还原到 revert 上的原始大小？

这是我正在使用的代码：

$('.gjg-item').draggable({snap: true, snapMode: 'inner', revert: 'invalid'});
$('.gjg-item').droppable({accept: '.gjg-item', hoverClass: "ui-state-hover"});
$('.gjg-item').on('dragstart', function(event, ui) {

    $(this).css('z-index', '9999999').width(50).height(50);
    $(this).find('img').width(50).height(50);


});

$('.gjg-item').on("dropover", function(event, ui){

    var draggingImgID = ui.draggable[0].id;
    var hoverPositionSize = $(this).width();
    if($(this).attr('data-pid') != draggingImgID) {
        $(this).css('opacity', '.2');
    }

});

$('.gjg-item').on("dropout", function(event, ui){

    $(this).css('opacity', '1');


});

$('.gjg-item').on("drop", function(event, ui){

    $('.gjg-item').draggable('destroy');
    $('.gjg-item').droppable('destroy');
    var idOfItemDropped = ui.draggable[0].id; // css id of item being dropped
    idOfItemDropped = idOfItemDropped.replace('gjg-i-', ''); // parse the id
    var droppedImgOldPosition = $('#gjg-i-'+idOfItemDropped).attr('data-position'); // get the image being dropped old position
    var droppedImgNewPosition = $(this).attr('data-position'); // get the new position where the image was dropped
    //console.log('hello');
    $.post( DOMAIN+LIBRARY+"grid/ajax/ajax_dragndrop.php", { gridID: gridID, imageID: idOfItemDropped, oldPosition: droppedImgOldPosition, newPosition: droppedImgNewPosition}, function(data) {


        if(data.code == 200) {
            $('.gjg-item').remove();
            ajaxArea('ni');
        }

    });

});

Answer 1

您可以添加代码来调整dragstop 事件的图像大小，如下所示：

var original_height = 100;
var original_width = 100;

$('.gjg-item').on('dragstop', function(event, ui) {

    $(this).css('z-index', '9999999').width(original_width).height(original_height);
    $(this).find('img').width(original_width).height(original_height);
});