Jquery：在完全相同的位置切换一个可拖动的图片

Question

我正在编写一个小游戏，用于娱乐和练习，用户必须使用拖放操作向政客投掷石块。首先，用户必须将政客拖入垃圾桶然后扔石头。 在政客被击中5次之后，我希望政治家的形象在不改变立场的情况下改变。我设法存储被拖拽的政治家的位置但是当我更换图片时，它总是出现在其他地方。

这是我的可拖动.politician的代码，我将位置存储在变量中：

$(function() {
    $('.politician').draggable({scroll: false, revert: "invalid"});
    $('.stone').draggable({scroll: false});    
    $('.trashdiv').droppable({
        accept: '.politician',
        drop: function(event, ui) { 
            var left = ui.position.top;
            var top = ui.position.left;      
            $("<div>Nice! Now throw things on the politician</div>").dialog();              
        }
});

在最后的if if语句中，我希望可拖动的.politician的图片已更改，但保持与用户拖动它的位置相同。

var limit = 5;
var hit1 = 1;
var hit2 = 2;
var hit3 = 3;
var hit4 = 4;
var counter = 0;

 $('.politician').droppable({
    accept: '.stone',
    drop: function(event, div) { 
        div.draggable.remove();
        counter++;

        if (counter == hit1) {
            alert("Awesome! You're doing it right.");
        }

        else if (counter == hit2) {
            alert("Outch! That must hurt!");
        }


        else if (counter == hit3) {
            alert("Keep going!");
        }


        else if (counter == hit4) {
            alert("Get it all out there!");
        }

        else if (counter == limit) {
               $(this).droppable("disable"),
         $( ".politician" ).replaceWith("<img src='pics/frauke-petry-dead-final.png' width='30%'> You've defeated the politician! Good Job");