javascript - 更改拖动对象并在放置后恢复它

Question

请帮助我，我通常知道如何使用可拖动和可放置的类，但我找不到实现此目的的方法:

我有一个大尺寸图像，需要将其拖放到 div 中。

1)拖动时，我不想在大尺寸图像上移动，而是想使用小尺寸图像(我已经有了，只需更改 src)。

2)一旦到达目标div，我想隐藏该拖动的图像并在其原始位置再次显示大尺寸图像。

唯一的限制是:必须应用“恢复:无效”。

这是我的代码:

$("#big_img").draggable({ 
    revert: 'invalid', 
    drag : function(e, ui){
        //Change big image with a small version of it
        $(this).attr("src").replace("/Large/","/Small/"); //<--this do nothing
    }
});
$("#target").droppable({
    drop: function(e, ui) {
        alert("was added"); //<-- no problem here.
        //Restore the big_img
    }
});

谢谢。

Answer 1

我想我已经解决了:

使用“helper”，我可以实现使用其他图像，如下所示:

$("#big_img").draggable({ 
    helper: return $("<img src='"+$(this).attr("src").replace("/Large/","/Small/")+"' />");
});

我只需要将其置于鼠标光标的中心，但我认为这不会成为问题。然后， 删除删除的元素也不会成为问题。因此，我不需要恢复图像，因为它并没有真正移动。 :)

如果您有其他选择，我将很乐意阅读。