2011-05-19 8 views
1

私のウェブページ実装に問題があります。JQuery私は何をしようとしているのか理解することは難しいだろうが、私はできるだけ明確にしようとするだろう(私の英語は本当に良くないが)。Jqueryドラッグ可能な複製されたdiv

私は「封じ込めラッパー」内をドラッグすることが可能であるのdiv whithのウェブページを持っている、と私はあなたがそれをドラッグするとは、あなたがそのメインのクローン(コピー)を取得することを実現しています divを作成し、このクローンのdivを画面の周りにドラッグすることができます( "containment-wrapper"内)。 メイン divをドラッグするたびに、別のクローンdivが作成されます。それは完全に動作します。

コード:

$(".tool").draggable({ 
     containment: "#containment-wrapper", 
     helper: 'clone', 
     stop: function(event, ui) { 
       if($num==null) $num=0; //treat a number for the id of the next cloned div 
       else $num++; 
       $(ui.helper).clone(true).attr("id",$(this).attr("id")+$num).removeClass('tool ui-draggable ui-draggable-dragging ui-widget-content').addClass('element ui-widget-content').appendTo('#containment-wrapper'); 
      } 
    }); 

問題は、私はあなたがそのWebページをロードする際に、ユーザがサーバで彼の前のdiv要素の状況保存していることを実装する必要があることである:すべての位置をクローンされたdivの(私はメイン divのIDと位置 - 上部と左を保存しました)。

ので私は、ページがロードされたときだけで実行されるコードを実装しようとしています、画面に、作成して、ユーザーがを保存したクローン化されたdivを位置づける(「封じ込めラッパー」内) 。

私はこのコードでそれを得た(私が値を持っている:ます$ idからメインのdiv、$は$トップを左のID - 私が作成する必要がdiv要素の位置):

 var $obj = $("#"+$id); //get the main div 
     if($num==null) $num=0; //treat a number for the id of the next cloned div 
     else $num++; 

     $obj.clone(true).attr("id",$id+"_"+$num).removeClass('ui-draggable ui-draggable-dragging ui-widget-content').addClass('ui-widget-content').appendTo('#containment-wrapper').css({ "position": "absolute", "left":$left + "px", "top":$top + "px" }); 

それは私がしたいクローンのdivのを作成しますが、私の大きな問題は、私はdiv要素、それはメインをドラッグし始めることをドラッグ中の内側に、マウスを使ってクローン化されたのdivのことをドラッグしようとするということです div(クローンされたdivを作成する元のもの)ともう1つのクローンされたdivが作成されます。だから私のコードが作成したクローンされたdivをドラッグすることは不可能です。

すべての私の状況と私の問題を理解することができればと思っています...どうすれば解決できるのでしょうか?

また、私はこの(これで、私はドラッグ可能なイベント機能で位置を治療することを考えていた)のような何かをしようとした:私は放火犯(Firefoxのpluggin)とそれをデバッグするとき、私は、

 var $obj = $("#"+$id); 
     $obj.trigger("mousedown.draggable", [ev]); 
     ev.stopPropagation(); 

をしかし、ドラッグ可能なイベントが実行されないことを確認してください。

は、私はそれを解決し、あなたの時間のために非常に非常に多くの

Aleix

+0

ようこそStackOverflow!あなたの英語は大丈夫です! jsfiddle.netで問題の凝縮された例を提供することは可能ですか? –

+0

"main div"をドラッグしてクローンを残しておきましょう。 idをスワップし、イベントリスナーをクローンに追加します。 – Yman

+0

@Adrew:私はそれについて知りませんでしたし、それを使ったこともないので、 "jsfiddle.net"の仕組みを見ています。私がそれを得るとき、私はあなたに言うでしょう;)ありがとう! // @Yman:ありがとうございます。私はそれを理解していますが、メインのクローンから複数のクローンを作成しなければならない場合は、同じ問題が発生すると思います...とにかく、試してみてください、ありがとうございます! – Aleix

答えて

0

をありがとう!私は(JavaScriptコード内)このコード行でこの関数を呼び出していました:

window.onload = initialize; 
コードはOKだった、唯一の問題は、クローン化されたdivを作成する責任があった のinitialize()関数の呼び出しでした

この行を削除し、initialize()機能を$(document).ready機能から呼び出すと、すべて正常に動作します! :)

$(document).ready(function() { 
     [...] 
     initialize(); 
     }); 

は私がjsfiddle.netにコードを単純化しようとし、それについて実現しました。だから、愚かなエラーですが、私は最終的にそれを解決してとても幸せです:)

あなたのご意見ありがとうございました。

関連する問題