2011-07-12 14 views
0

私はdraggablesにクローンヘルパーを使用していますが、クローンをドラッグしてドロップした後は、ドロッパーブルには残りません。私はいくつかの例を参照し、ドロップイベントで.append()を追加しますが、ドラッグ可能な位置にドロップされません。どのように私はdraggableクローンをドロップされた位置に残すことができます任意のアイデア??ここで jQuery - draggableクローンを保つ


は私のスクリプトです.....

  var element = ui.draggable.children(); 
      var oldID = element.attr('id'); 
      element.attr('id', (oldID + '_' + counter)); 
      var pos = element.offset(); 
      var clone = element.clone(); 
      clone.width(element.width()); 
      clone.height(element.height()); 
      $(clone).css({ 
       "left": pos.left, 
       "top": pos.top 
      }); 
      $('#rightframe').append(clone); 

は、任意の助けに感謝:ここに私のスクリプトの一部である (私はドロップイベントのオプションを保存するためのオプションの変数を宣言します):

var counter = 0; 
    var options = {}; 
    options.accept = '.image'; 
    options.drop = function (event, ui) { 

     if (ui.draggable.children().attr('id').match(/_(\d+)$/) != null) { 
      // If ID contains number after an underscore, call UpdatePosition action 
      var temp = ui.draggable.children(); 
      alert('inside if'); 
      updatePosition(temp); 
     } 
     else { 
      // Image not exist, call CreateContainer action 
      counter++; 
      var element = ui.draggable.children(); 
      var oldID = element.attr('id'); 
      element.attr('id', (oldID + '_' + counter)); 
      var pos = element.offset(); 
      var clone = element.clone(); 
      clone.width(element.width()); 
      clone.height(element.height()); 
      $(clone).css({ 
       "left": pos.left, 
       "top": pos.top 
      }); 
      $('#rightframe').append(clone); 
      updateImage(element, oldID); 

     } 
    } 
    $('#rightframe').droppable(options); 
+0

jQueryのUIドロップ可からの主な例は、正確に何をしたいん。コード全体を投稿できますか? – Michael

+0

申し訳ありませんが、私はドロップセクションに私のdraggableを残すことができません、私は理由もあるのだろうか。 – shennyL

答えて

0

私はwebappでも同じことをしています。私の問題は2つのことでした。

  1. クローニングすると、ドラッグ可能な/削除可能な機能が混乱するようです。
  2. ドラッグ可能なオフセットを取得するのは画面に向かっていますが、クローン上の位置を設定して#rightframeに追加すると、#rightframeオブジェクトのオフセットになります。たとえば、#rightframeのオフセットが10の場合、10、ドラッグ可能なオフセットは20,20です。クローンの画面への最終的なオフセットは30,30になります。

    を最初にドロップしたとき、次のよう

私のソリューション。ドロップ可能な内部のすべてのjquery-uiハンドルを破棄し、ドロップ機能の最後に再作成します。 (場合によっては$('#rightframe').droppable("destroy")$('#rightframe').droppable(options);

を破壊と作成の間で2度だけ呼び出すことができます。ここではその

var adjust = $("#rightframe").offset(); 
$(clone).css({ 
    "left": pos.left-adjust.left, 
    "top": pos.top-adjust.top 
}); 

のように$(「#のrightframe」)のオフセットをsubstractingことにより、オフセットを計算正しい私はあなたの問題を理解願っています:)