1

请帮助我，我一般知道如何使用可拖动和可放置类，但我找不到实现这一点的方法：

我有一个大尺寸的图像，我需要将其拖放到一个 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
    }
});

谢谢你。

4

2 回答 2

1

我想我解决了它：

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

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

我只需要将它居中鼠标光标，但我认为这不会是一个问题。然后，删除丢弃的元素也不会成为问题。所以，我不需要恢复图像，因为它并没有真正移动。:)

如果您有其他选择，我会很高兴阅读它。

于 2010-02-04T06:22:22.373 回答
0

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

$("#big_img").draggable({ 
    revert: 'invalid', 
    drag : function(e, ui) {
        $this = $(this);
        $this.attr("src", $this.attr("src").replace("/Large/","/Small/"));
    }
});
于 2010-02-04T09:23:09.800 回答