Question

假设我有一个宽度为2x的拖动，需要放在宽度为3x的区域，在最左边或最右端（在另一边留下x的间隙）。因此，例如我有一个可拖动的div，它被丢弃在带有三个子tds的tr上，并且可以在第1和第2个td，或第2个和第3个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; }

祝你好运！

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

1 个答案: