2012-01-28 11 views
0

私は〜6 draggablesを受け入れるjqueryのdroppableである "大きな"テーブルでページの応答時間を最適化しようとしています。他の人と同じように、私はdroppablesのそれぞれを作るときに貧弱な応答時間を見ました。私はthis postthis postの両方を読みましたが、私のコードを動作させることができません。JQueryのドロップ可能で大きなテーブル

私の基本的な問題は、ドラッグ可能な要素が削除された要素への参照を取得する方法がわかりません。私がアクセスできる唯一の要素は、実際のドラッグ可能です。ここで

は、私は私のjqueryのコードを定義した方法は次のとおりです。あなたが提供することができます

$("#grid table").droppable({ 
        //disabled: 'true', 
        //activate: function (event, ui) { 
        //   console.log("Activated table") 
        //}, 
        //over: function (event, ui) { 
         //  console.log("Dragged over") 
        //}, 
        //activeClass: "ui-state-default", 
        //hoverClass: "ui-state-hover", 
        accept: ":not(.ui-sortable-helper)", 
        tolerance: 'pointer', 
        drop: function(event, ui) { 
          console.log("draggable DROPPED!!!"); 
          //$(this).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250); 
          var cell = document.elementFromPoint(event.pageX - $(window).scrollLeft(), event.pageY - $(window).scrollTop()); 

          console.log('Dropped cell is'+cell); 
          console.log(ui.position) 
          console.log(ui.offset) 
          console.log(document.elementFromPoint(ui.position.left, ui.position.top)) 
          $(cell).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250); 

          console.log('Setting background to:'+ui.draggable.attr("colorValue")); 
        } 

すべてのヘルプははるかに高く評価されます。ドロップ

答えて

1

$(この):関数(イベント、UI)は、ドラッグが

+0

右を滴下した要素を指すが、ドロップ可能に

タグに設定されているので、この場合には、これはテーブルを参照。私は、特定の​​の上にドラッグ可能なドロップされた場所を見つける必要があります。 – JJensL

+0

クイックルックから、私は2つの方法を見ています - それぞれのtdをdroppableとして設定するか、tdの位置を計算します。 – krasu

+0

各tdをdroppableとして設定することは、大きな性能のボトルネックです。私は上記のコードでdocument.elementFromPointを使ってtdの位置を計算しようとしていましたが、tdの代わりにドラッグ可能なimgタグを返しています。あなたはどのようにtdの位置をお勧めしますか? – JJensL

関連する問題