CODEWITHSUNDEEP
javascriptjqueryimagejquery-uijquery-ui-draggable
Josh
Josh

Reputation: 1

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

Basically, I have .dragme (object being dragged), .dropzone1 (place to be dropped at) and an image I want .dragme to become once it has been dropped.

So far I have this

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

So, that code works, once .dragme has been dropped in place I get the alert. But I've tried using .attr to change the image source of .dragme in place of where the alert is currently (the alert also works if I put it into the below code, but the image still doesn't change):

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

I've looked through other answers to similar questions, but none of the solutions worked, any help is greatly appreciated.

This is a little jsfiddle but i can't get my images onto it, they're only 30x30 png's anyway. I made it so that the alert is working so if anyone can have a play and get it so that the red block changes colour or into an image when it lands on the blue, that'd be great!

Upvotes: 0

Views: 1190

Answers (1)

sangram parmar
sangram parmar

Reputation: 8726

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 the drop event documentation:

This event is triggered when an accepted draggable is dropped 'over' (within the 
tolerance of) this droppable. In the callback, $(this) represents the droppable 
the draggable is dropped on. ui.draggable represents the draggable.

Upvotes: 1

Related Questions