jQuery UIで交差する 'droppables'をシミュレートすることはできますか？

Question

私は幅3xの領域に、左端または右端（xの隙間を残して）にドロップする必要がある、幅2xのドラッグ可能なものがあるとします。だから私は3つの子供のtdsとtrにドロップされているドラッグ可能なdivを持って、1番目と2番目のtd、または2番目と3番目のtdで同時にドロップすることができます。誰でもjQuery UI上の何らかのトリッキーでこの効果を達成する方法を考えてもらえますか？それとも、より低いレベルで作業する必要がありますか？ユーザーのフィードバックはここで重要です.1回目と2回目のtds上でのホバリングは、2回目と3回目のtds上でのホバリングとは異なるように見える何らかの方法でユーザーに伝えられます。

Answer 1

セルが3つしかないので、この問題は非常に解決しやすいです。遠い左と遠い右のセルをドロップ可能な要素にすることができます。今では、ドラッグ可能なものがこれらのセルの1つをセルに移動すると、そのセルの背景色と中間色を異なる色に変更できます。

あなたのHTMLがあるのであれば、例えば、：

<div id="draggable_thing"><!-- who knows... (probably you...) --></div> 
<tr> 
    <td class="left"></td> 
    <td class="mid"></td> 
    <td class="right"></td> 
</tr> 

次に、あなたのようなものだけで行うことができます。

$(function() { 
    $("#draggable_thing").draggable(); 
    $(".right").droppable({ 
     over: function(event, ui) { 
      $(this).toggleClass('over-right-cell'); 
      $(this).parent().find('.mid').toggleClass('over-right-cell'); 
     } 
     out: function(event,ui) { 
      $(this).toggleClass('over-right-cell'); 
      $(this).parent().find('.mid').toggleClass('over-right-cell'); 
     } 
    }); 
    $(".left").droppable({ 
     over: function(event, ui) { 
      $(this).toggleClass('over-left-cell'); 
      $(this).parent().find('.mid').toggleClass('over-left-cell'); 
     } 
     out: function(event,ui) { 
      $(this).toggleClass('over-left-cell'); 
      $(this).parent().find('.mid').toggleClass('over-left-cell'); 
     } 
    }); 
}); 

をそしてあなたが必要とするすべてのカップルの異なるCSSクラスにありますアクションが異なることをユーザーに知らせます。デモの目的でこれほど醜いものがあれば、デモの目的で十分です：

幸運を祈る！