javascript - Attempting to use JQuery to change an img src of draggable object when dropped -

basically, have .dragme (object being dragged), .dropzone1 (place dropped at) , image want .dragme become once has been dropped.

so far have this

$(".dropzone1").droppable({     accept:".dragme",     drop: function() {         alert("dropped");     } }); 

so, code works, once .dragme has been dropped in place alert. i've tried using .attr change image source of .dragme in place of alert (the alert works if put below code, image still doesn't change):

$(".dropzone1").droppable({     accept:".dragme",     drop: function() {         $(".dragme").attr("src", "../imgs/newimage.png");     } }); 

i've looked through other answers similar questions, none of solutions worked, appreciated.

this little jsfiddle can't images onto it, they're 30x30 png's anyway. made alert working if can have play , red block changes colour or image when lands on blue, that'd great!

try this:

demo

    $(".dragme").draggable();  $(".dropzone1").droppable({     accept:".dragme",     drop: function( event, ui ) {       $(".dragme").attr("src", "../imgs/newimage.png");       alert($(".dragme").attr('src'));     } }); 

2nd solution

demo

$(".dragme").draggable();  $(".dropzone1").droppable({     accept:".dragme",     drop: function( event, ui ) {       $(ui.draggable).attr("src", "../imgs/newimage.png");      } }); 

from drop event documentation:

this event triggered when accepted draggable dropped 'over' (within  tolerance of) droppable. in callback, $(this) represents droppable  draggable dropped on. ui.draggable represents draggable.