jqueryの - イメージ・スワップにjQueryとJqueryUIを使用して

Question

イム後にドラッグ可能改：私はそれを再配置することができますこの画像の編集ボタンがあり、画像

が含まれている<img>を持って

• （折り返しdivオーバーフロー：非表示）、ユーザーはキャンセルまたは保存をクリックして、最終ポジションの「画像の相対的な収穫を保存する」（facebookプロフィールのサムセレクタが動作すると思います）

• また、ユーザーは〜から選ぶことができる〜8画像（サンプルからの背景を変えるツイッターに似ています）のオプションリストを持っています。クリックすると、<img>タグの画像がユーザがクリックした画像と入れ替えられ、位置が上にリセットされます：0px、leftpx;

これはすべて正常に機能します。

しかし、イメージがすでにドラッグされている場合、スワップ後に別のイメージをドラッグすることはできません。 inspect要素では、コードが正しい上下の座標で更新され、適切なクラスが追加されますが、イメージは移動しません。

コードを参考にすれば、それを提供できます。

EDIT **

ID = image_slice_wrapper以下のコードは、オーバーフロー固定寸法で隠されています。 は（

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

DB（保存）から左&トップでページのロードにdivのバックアップをロックするには、[保存]ボタンを本部ドラッグ可能（エキストラスタイリングのもの削除）にする

<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> 

編集ボタンのスクリプトをsrcをしていますAJAX &スタイリング除去）

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

IMG 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;"); 
}); 

もう一度：画像をドラッグするとその画像を別の画像に置き換えます。新しい画像はVISIBLYドラッグ可能ではありません。しかし、私はまだ上と左のスタイルが変更され、右のクラスが要素に追加されているのを見ることができます。

Answer 1

解決しました。これがなぜ機能するのかまだ分かりません。

私は、スクリプトを置き換える画像を変更：

$(".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で目に見えてドラッグ可能です。クール！