2012-01-19 20 views
2

私はカレンダー型アプリケーションでdraggableとdroppableでjquery UIを使用しています。jQuery UI draggable over outイベントの順序

カレンダーは、各行に7つのセルを持つテーブルとしてレンダリングされ、各セルは1日を表します。毎日カレンダー内の別の表内のセルとして表される4つの四半期に分かれています。これらの内部テーブルはn個の行を持ち、nは月あたりのジョブ数に基づいています。

私は予約を表すdraggable divを持っています。その予約は、あなたがそれらをドラッグしているので、目標消費範囲をハイライトする必要があります。私は

over: function (event, ui) { 
     // walk forward and highlight the correct cells 
     //console.log('in'); 
        var numCells = ui.draggable.attr('db:length') * 4; 
     var me = jQuery(this); 
     me.addClass('me'); 
     var cells = jQuery(".inner-table .allowableTarget td"); 
     for (var i = 0; i < cells.length; i++) { 
      if (jQuery(cells[i]).hasClass('me')) { 
       cells.slice(i, i + numCells).addClass('drop-hover'); 
       return; 
      } 
     } 
    }, 
    out: function (event, ui) { 
     // unhighlight the highlighted cells from over... 

     //console.log('out'); 
     var items = jQuery(".inner-table td.drop-hover"); 
     items.removeClass('drop-hover'); 

     var me = jQuery(this); 
     me.removeClass('me'); 

    }, 

これ以下のようにオーバーとアウトドラッグを使用しています。これを行うには、主に限り、私は罰金その作品を左から右へドラッグしていて、動作します。私が右から左にドラッグしている場合、それはしません。その理由は、イベントをドラッグする方向によって、違う順番でどのような方法で発火するかということによると思われます。私は右の左にドラッグしている場合は、新しいセルの上に古いセルからの前に、それが前の内側のテーブルの最後のセルにドラッグする場合は、その場合は、内側のテーブルの最初のセルでない限り発生します。

私の質問は次のとおりです。私が欲しいものを達成するための良い方法がありますか?または、私がいつも外に出て行くことを確実にする方法?

+0

ああ明白な答えは誰...オーバーの開始に出てものを移動することでしたそれはより効率的にする方法を知っているそれは少し遅れているようです? – kmcc049

+0

これは、それらが完全に異なる場所にドラッグすると、強調表示された行のハイライトを解除しないことを意味します。 – kmcc049

答えて

3

私は今日同じ問題を抱えていましたが、あなたの投稿の前に原因(前の要素)を気付かず、もちろん正常な動作です。 私の問題を解決するために、単に "over"関数をsetTimeoutに0msで置くので、 "over"関数はタスクキューにプッシュされ、 "out"関数の後に実行されます。

このメカニズムを理解するためのフィリップ・ロバーツから素晴らしい話:http://vimeo.com/96425312

[EDIT] 例:http://jsbin.com/rizuse/1/edit?html,js,output

+0

ソリューションのサンプルコードが役立ちます。 –

+0

この回答は私を助け、それは一貫して動作します。 (0、{ ここ //置くコード}関数()) 'VARトン= setTimeoutメソッド;' 注意:私はで私の関数 'オーバー' の内容を包ん 'this'が、ここでは異なるコンテキストを持っています、 'var = this'のようなことを行い、setTimeout関数の本体で' that'を使う必要があるかもしれません。あなたの関数が 'this'を使用していなかった場合は、心配する必要はありません。 – Lunster