Изменить перетаскиваемый объект и восстановить его после удаления

Question

, пожалуйста, помогите мне, я в целом знаю, как использовать перетаскиваемые и сбрасываемые классы, но я не могу найти способ добиться этого:

У меня есть изображение большого размера, которое мне нужно перетащить в div.

1) при перетаскивании, вместо перемещения по изображению большого размера, я хочу использовать изображение небольшого размера (оно у меня уже есть, просто нужно изменить источник).

2) Как только он достигнет целевого элемента div, я хотел бы скрыть это перетаскиваемое изображение и снова показать изображение большого размера в его первоначальном месте.

Единственное ограничение: должно применяться «revert: invalid».

Это мой код:

$("#big_img").draggable({ 
    revert: 'invalid', 
    drag : function(e, ui){
        //Change big image with a small version of it
        $(this).attr("src").replace("/Large/","/Small/"); //<--this do nothing
    }
});
$("#target").droppable({
    drop: function(e, ui) {
        alert("was added"); //<-- no problem here.
        //Restore the big_img
    }
});

Спасибо.

Answer 1

Мне кажется, я решил это:

Используя "помощник", я могу вместо этого использовать другое изображение, например:

$("#big_img").draggable({ 
    helper: return $("<img src='"+$(this).attr("src").replace("/Large/","/Small/")+"' />");
});

Мне просто нужно отцентрировать его к курсору мыши, но это, я думаю, не будет проблемой. Затем, удаление выпавшего элемента также не будет проблемой. Поэтому мне не нужно восстанавливать изображение, так как оно не движется. :)

Если у вас есть другая альтернатива, я буду рад ее прочитать.

Answer 2

String.prototype.replace() не изменяет исходную строку, но возвращает новую, измененную строку.Попробуйте следующее:

$("#big_img").draggable({ 
    revert: 'invalid', 
    drag : function(e, ui) {
        $this = $(this);
        $this.attr("src", $this.attr("src").replace("/Large/","/Small/"));
    }
});