删除时尝试使用JQuery更改可拖动对象的img src [英] Attempting to use JQuery to change an img src of draggable object when dropped

问题描述

基本上，我有.dragme（被拖动的对象），。dropzone1（要放弃的位置）和我想要的图像.dragme一旦被删除就会成为。

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.

到目前为止，我有这个

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

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

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.

这是一个小小的 jsfiddle 但是我无法将图像放到它上面，无论如何它们只有30x30 png。我这样做是为了让警报正常工作，所以如果有人可以玩游戏并获得它以便红色块在蓝色时变色或变成图像，那就太棒了！

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!

推荐答案

试试这个：

演示

demo

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

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

第二个解决方案

< a href =http://jsfiddle.net/QsjqP/124/ =nofollow> DEMO

DEMO

$(".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.

这篇关于删除时尝试使用JQuery更改可拖动对象的img src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！