jQuery的 - 圖像交換

進出口使用jQuery和jQueryUI的後可拖動遊：jQuery的 - 圖像交換

我有<img>包含圖像
有這個圖片，允許其重新定位上的編輯按鈕（包裝div溢出：隱藏），然後用戶可以點擊取消或保存發送一個AJAX電話的最終位置，「保存圖像的相對裁剪」（想像Facebook的個人資料圖片拇指選擇器的作品）
用戶還可以從他/她可以選擇的〜8個圖像的選項列表（類似於從樣本背景改變的背景）。點擊<img>標籤中的圖片與用戶點擊的圖片交換，位置重置爲頂部：0px，leftpx;

這一切都很好，很好。

但是，如果圖像已被拖動 - 然後交換後的不同圖像不能被拖動。在檢查元素中 - 代碼用正確的頂部和左側座標進行更新，並添加正確的類 - 但圖像不移動。

如果代碼會有幫助 - 我可以提供。

編輯**代碼下面

ID = image_slice_wrapper已溢出隱藏有固定尺寸。已SRC與左&頂頁面加載從DB（保存）

<div id="image_slice_wrapper"> 
<img id="draggable" class="slice_img ui-draggable" style="position:relative; left:-1000px; top:-250px" src="images/ducati.jpg"/> 
</div>

編輯按鈕腳本，以事業部可拖動（額外造型的東西去掉）

$("#edit_button").click(function() { 
$(".slice_img").draggable({ disabled: false, drag: function(){       
$(".slice_img").css("cursor","move"); 
});

保存按鈕來鎖定DIV備份（ AJAX &造型去掉）

$("#save_button").click(function() { 
$('.slice_img').draggable("option", "disabled", true); 
});

圖代替腳本（slice_thumb是圖像預覽觸發掉期）

$(".slice_thumb").click(function() { 
var new_image = $(this).find("img").attr("src"); 
$(".slice_img").attr("src",new_image); 
$(".slice_img").attr("style","left:0px; top:0px;"); 
});

所以再次：如果我拖動圖像。然後用另一個圖像替換該圖像。新圖像不可見可拖動。不過，我仍然可以看到頂部和左側樣式正在更改，並且將正確的類添加到元素中。

來源

2011-11-10 jeffhuber

代碼總是有用的.. jsfiddle.net更好。首先想到的是，你是否使用現場對事件有約束力？ – Todd

葉向我們展示一些代碼！ – Kimtho6

對不起！非常感謝。 – jeffhuber

解決了我的問題。仍然不明顯，爲什麼這個工程。

我改變了圖像替換爲腳本：

$(".slice_thumb").click(function() { 
    var src = $(this).find("img").attr("src"); 
    $(".slice_img").attr("style","left:0px; top:0px;"); 
    $("#draggable").after('<img src=" " />').attr("src", src).addClass("slice_img ui-draggable").attr("style","position:relative; left:0px; top:0px").attr("id","draggable"); 
});

它實際上取代了IMG SRC（就像是之前做的），而且還<img src="_">後創建一個空白圖像。由於某種原因，jquery喜歡這個。新圖像在代碼中可拖動（我可以看到位置發生變化） - 並且在DOM中明顯可拖動。涼！

來源

2011-11-11 16:23:18 jeffhuber

jQuery的 - 圖像交換

回答

相關問題