js/jQuery Drag'n'Drop、ドロップターゲットを再計算

Question

次の問題があります。ノード内のデータがAJAXでフェッチされるように、必要に応じて折り畳んで展開できるサブノードを持つ大きなツリーがあります。しかし、私はjquery.event.drop/dragを使用してドラッグ/ドロップターゲットを作成します。

しかし、私は折りたたんだ/開いてドロップターゲットの位置を変更し、私は再計算する必要があります。これは私がそれをしたいと思った方法です：

function create_drop_targets() { 
    $('li a') 
    .bind('dropstart', function(event) { 
    }) 
    .bind('drop', function(event) { 
    }) 
    .bind('dropend', function(event) { 
    }); 
} 

fold_number/unfold時にcreate_drop_targets（）が呼び出されます。

ただし、これは機能しません。私が見つけたjquery.event.drop以内に次

var drop = $.event.special.drop = { 
    setup: function(){ 
     drop.$elements = drop.$elements.add(this); 
     drop.data[ drop.data.length ] = drop.locate(this); 
     }, 
    locate: function(elem){ // return { L:left, R:right, T:top, B:bottom, H:height, W:width } 
     var $el = $(elem), pos = $el.offset(), h = $el.outerHeight(), w = $el.outerWidth(); 
     return { elem: elem, L: pos.left, R: pos.left+w, T: pos.top, B: pos.top+h, W: w, H: h }; 
     } 

は今、私はそれがdroppablesのための新しい位置に$の要素を再生成して、私は再びセットアップ（）メソッドを呼び出すことができる方法を知っておく必要があります。

Answer 1

jQuery 1.3で導入されたライブイベントを追加する方がいいでしょうか？

$("li a").live("dropstart", function(){...});

Answer 2

ちょうど同じ問題がありました。私はjQueryののソース・コード内の周りさまよっと（ui.droppable.jsで）これを見つけた：

drag: function(draggable, event) { 
    //If you have a highly dynamic page, you might try this option. It renders positions every time you move the mouse. 
    if(draggable.options.refreshPositions) $.ui.ddmanager.prepareOffsets(draggable, event); 
    ... 

ので、あなただけの

$(".cocktails").draggable({ 
    refreshPositions: true, 
}); 

非常に文書化されていないようですを使用する必要があると思います。..しかし、それは私の問題を解決しました。すべての作業を少し遅くしていますが、変更が発生する前に有効にして、ユーザーがマウスを動かして変更が発生すると無効にすることをお勧めします。

Answer 3

liteGridのドラッグ可能な行とスクロールを組み合わせようとしたときに同じ問題が発生しましたが、回避策が見つかりました。あなたの走行距離は変わるかもしれませんが、グリッドがスクロールされているかどうかを確認するロジックをドラッグイベントハンドラに追加していました（これは、ドロップ可能な位置を強制的にリフレッシュする必要があった時です）。 refreshPositionsをドラッグ可能でtrueに設定します。これはすぐに位置をリフレッシュしませんが、ドラッグハンドルが次に移動したときにリフレッシュされます。 refreshPositionsは物事を遅くするので、次にドラッグイベントハンドラが次回起動したときに再び無効にします。結果的に、refreshPositionsはグリッドがliteGridでスクロールし、残りの時間が無効になっている場合にのみ有効になります。ここで説明するためにいくつかのコードです：

//This will be called every time the user moves the draggable helper. 
function onDrag(event, ui) { 
    //We need to re-aquire the drag handle; we don't 
    //hardcode it to a selector, so this event can be 
    //used by multiple draggables. 
    var dragHandle = $(event.target); 

    //If refreshOptions *was* true, jQueryUI has already refreshed the droppables, 
    //so we can now switch this option back off. 
    if (dragHandle.draggable('option', 'refreshPositions')) { 
     dragHandle.draggable('option', 'refreshPositions', false) 
    } 

    //Your other drag handling code 

    if (/* logic to determine if your droppables need to be refreshed */) { 
       dragHandle.draggable('option', 'refreshPositions', true); 
    } 
} 


$("#mydraggable").draggable({ 
    //Your options here, note that refreshPositions is off. 
    drag: onDrag 
}); 

私は元の質問は今かなり古いです実現が、1

Answer 4

...それはキーボードの中に私が行ったように何度でも頭をラミングからあなたを節約できます願っていますあまりオーバーヘッドのないドラッグ可能な要素の位置をリフレッシュするために思いついた小さなトリック（AFAICT）は、適切な場合はいつでも無効にしてすぐに再び有効にすることです。例えば

、私は私のブラウザのウィンドウをリサイズすることは、私のドラッグ可能なテーブルの行の位置を更新しないことに気づいたので、私はこれでした：私は、これはそこに誰かに役立ちます願ってい

$(window).resize(function() {     
    $(".draggable").draggable("option", "disabled", true); 
    $(".draggable").draggable("option", "disabled", false); 
}); 

を！