是否可以在 jQuery UI 中模拟相交的“droppables”？

Question

假设我有一个宽度为 2x 的可拖动对象，需要将其放在宽度为 3x 的区域上，无论是在最左端还是最右端（在另一侧留下 x 的间隙）。因此，例如，我有一个可拖动的 div，它被放置在具有三个子 td 的 tr 上，并且可以同时放置在第一个和第二个 td 或第二个和第三个 td 上。任何人都可以想出一种在 jQuery UI 上使用某种技巧来实现这种效果的方法，还是我需要在较低级别工作？用户反馈在这里很重要 - 悬停在第一个和第二个 tds 上应该以某种不同于悬停在第二个和第三个 tds 上的方式传达给用户。

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; }

祝你好运！