0

基本上，我有 .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。我这样做是为了让警报正常工作，所以如果有人可以玩并得到它，以便红色块在落在蓝色时改变颜色或变成图像，那就太好了！

4

1 回答 1

1

尝试这个：

演示

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

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

第二个解决方案

演示

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

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

    }
});

从drop 事件文档中：

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.
于 2013-08-08T11:07:13.473 回答