Change dragging object and restore it after dropping it.

Question

Hi!, please help me, I know in general how to use the draggable and droppable classes, but I can not find a way to achieve this:

I have a large-sized image that I need to drag and drop into a div.

1) while dragging, instead of moving around the large-sized image, I want to use a small-sized image (I already have it, just need to change the src).

2) Once it reaches the target div, I would like to hide that dragged image and show again the large-sized image in its original place.

The only restriction is: "revert: invalid" must apply.

This is my code:

$("#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
    }
});

Thank you.

Answer 1

I think I solved it:

Using "helper", I can achieve to use other image instead, like this:

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

I just need to center it to the mouse cursor, but that I think won't be a problem. Then, removing the dropped element won't be a problem either. So, I won't need to restore the image as it is not really moving. :)

If you have another alternative, I will be pleased to read it.

Answer 2

String.prototype.replace() does not modify the source string, but returns a new, modified string. Try the following:

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