jQuery可拖动改变图像大小在拖动开始，恢复原来的大小在恢复

jQuery draggable change image size on drag start, restore original size on revert

本文关键字：恢复 拖动 原来 开始 改变 jQuery 图像      更新时间：2023-09-26

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

我怎么能告诉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');
        }
    });
});

您可以像这样添加代码来调整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);
});
相关文章：