尝试使用 JQuery 在拖放时更改可拖动对象的 img src

Question

基本上，我有 .dragme（被拖动的对象）、.dropzone1（要放置的位置）和我希望 .dragme 放置后变成的图像。

到目前为止我有这个

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

因此，该代码有效，一旦将 .dragme 放置到位，我就会收到警报。但是我尝试使用 .attr 更改 .dragme 的图像源来代替警报当前的位置（如果我将它放入下面的代码中，警报也可以工作，但图像仍然没有改变）：

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

我查看了类似问题的其他答案，但没有一个解决方案有效，非常感谢任何帮助。

这有点jsfiddle，但我无法将我的图片放到上面，反正它们只有 30x30 png。我这样做是为了让警报正常工作，所以如果有人可以玩并得到它，以便红色块在落在蓝色时改变颜色或变成图像，那就太好了！

Answer 1

试试这个：

demo

    $(".dragme").draggable();

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

第二个解决方案

DEMO

$(".dragme").draggable();

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

    }
});

来自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.