Question

请帮助我，我知道如何使用draggable和droppable类，但我找不到实现这个目的的方法：

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

1）在拖动时，我想使用一个小尺寸的图像（我已经拥有它，只需要更改src），而不是在大尺寸图像周围移动。

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

唯一的限制是：“revert：invalid”必须适用。

这是我的代码：

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

我想我解决了它：

使用“帮助器”，我可以实现使用其他图像，如下所示：

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

我只需要将它放在鼠标光标中心，但我认为这不会有问题。然后，删除掉落的元素也不是问题。所以，我不需要恢复图像，因为它没有真正移动。：）

如果您有其他选择，我将很高兴看到它。

Answer 2

String.prototype.replace()不会修改源字符串，但会返回一个新的修改后的字符串。请尝试以下方法：

$("#big_img").draggable({ 
    revert: 'invalid', 
    drag : function(e, ui) {
        $this = $(this);
        $this.attr("src", $this.attr("src").replace("/Large/","/Small/"));
    }
});

更改拖动对象并在删除后将其恢复

2 个答案: