Is it possible to simulate intersecting 'droppables' in jQuery UI?

Question

Say I have a draggable with width 2x that needs to be dropped on an area with width 3x, either at the leftmost or rightmost end (leaving a gap of x on the other side). So for instance I have a draggable div that is being dropped on a tr with three child tds, and can either be dropped simultaneously on the 1st and 2nd td, or 2nd and 3rd td. Can anybody think of a way to achieve this effect with some sort of trickery on top on jQuery UI or will I need to work at a lower level? User feedback is important here - hovering over the 1st and 2nd tds should be conveyed to the user in some way that appears different to hovering over the 2nd and 3rd tds.

Answer 1

Since you only have 3 cells, this problem is quite easy to solve. You can simply make the far-left and far-right cells be the droppable elements. Now, when a draggable hovers over one of these to cells, you can change the background color of it and the middle one to a different color.

So, for instance, if your HTML is:

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

Then you can just do something like:

$(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'); 
        }
    });
});

And then all you'll need is a couple different CSS classes to let the user know the action is different. Something ugly like this would suffice for demo purposes:

.over-right-cell { background-color: blue; }
.over-left-cell  { background-color: green; }

Good luck!