更改拖動對象，並刪除它

請幫幫我，我知道一般如何使用拖動和投擲的課程後恢復，但我不能找到一種方法來實現這一目標：更改拖動對象，並刪除它

我有一個大尺寸圖像，我需要拖放到一個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 
    } 
});

謝謝。

來源

2010-02-04 lepe

我想我解決了這個問題：

使用「幫手」，我可以實現使用其他圖像，而不是像這樣：

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

我只是需要將其中心到鼠標光標，但我認爲這不會成爲問題。然後，刪除掉落的元素也不會成爲問題。所以，我不需要恢復圖像，因爲它並沒有真正移動。 :)

如果您有其他選擇，我會很樂意閱讀它。

來源

2010-02-04 06:22:22 lepe

要居中鼠標光標，使用： $（「＃big_img」）拖動（{ cursorAt：{左：20，頂：15}，幫手：... }）; 在我的情況下，小圖像是40x30，所以我想以x = 20，y = 15爲中心。我希望這可以幫助某人。 :) – lepe 2010-02-04 06:32:18

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-04 09:23:09

謝謝您的評論...我會在稍後測試它。但是，對於上述問題，我認爲使用助手比我的初始方法更好得多。主要是因爲它也解決了我的其他問題。 – lepe 2010-02-08 03:02:06

更改拖動對象，並刪除它

回答

相關問題