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

时间:2009-04-20 03:27:54

标签: jquery jquery-ui

假设我有一个宽度为2x的拖动,需要放在宽度为3x的区域,在最左边或最右端(在另一边留下x的间隙)。因此,例如我有一个可拖动的div,它被丢弃在带有三个子tds的tr上,并且可以在第1和第2个td,或第2个和第3个td同时被丢弃。任何人都可以想到一种在jQuery UI上使用某种技巧来实现这种效果的方法,还是我需要在较低级别工作?用户反馈在这里很重要 - 悬停在第一和第二个tds上应该以某种方式传达给用户,这种方式与在第二和第三个tds上方悬停不同。

1 个答案:

答案 0 :(得分: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; }
祝你好运!