Можно ли имитировать пересекающиеся «отбрасываемые объекты» в пользовательском интерфейсе jQuery?

Question

Скажем, у меня есть перетаскиваемый элемент с шириной 2x, который необходимо отбросить на область шириной 3x, либо на крайнем левом, либо на правом конце (оставляя зазор x на другой стороне). Так, например, у меня есть перетаскиваемый div, который сбрасывается на tr с тремя дочерними tds, и может быть либо сброшен одновременно на 1-м и 2-м тд, либо на 2-м и 3-м тд. Кто-нибудь может придумать, как добиться этого эффекта с помощью какой-то хитрости сверху на jQuery UI, или мне нужно будет работать на более низком уровне? Здесь важна обратная связь с пользователем - парение над 1-м и 2-м тдс должно быть доведено до пользователя таким образом, который отличается от зависания над 2-м и 3-м тд.

Answer 1

Поскольку у вас есть только 3 ячейки, эту проблему довольно легко решить. Вы можете просто сделать крайние левые и крайние правые ячейки выпадающими элементами. Теперь, когда перетаскиваемый курсор нависает над одним из них в ячейках, вы можете изменить цвет фона его и среднего на другой.

Так, например, если ваш 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, чтобы пользователь знал, что действие отличается. Нечего подобного было бы достаточно для демонстрационных целей:

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

Удачи!