Question

蓝色项目应该被删除其他3个div中的一个。这已经正常工作了。但是当蓝色项目超过其他一个div（并且鼠标尚未释放）时，我希望产生效果。相应的div应该是灰色的（但只有最小的div，就像掉落行为一样）。

有没有人建议如何做到这一点？此外，我无法让'hoverClass'设置正常工作，也有任何解决方案吗？

提前致谢！

Answer 1

添加out功能：

$(document).ready(function(e) {
    $("#dragDiv").draggable();
    $("#dropDiv1, #dropDiv2 , #dropDiv3").droppable({
        greedy: true,
        drop: function()
        {
            $(this).css("background-color", "black");    
        },
        over: function()
        {
            $(this).css("background-color", "#333");
        },
        out: function()
        {
            $(this).css("background-color", "");
        },

        tolerance: "pointer"
    });
});

当蓝色方块留下矩形时，这将重置背景色。

Answer 2

您遇到hoverClass问题，因为您使用id选择器为droppable元素定义背景颜色，即使将dark类应用于元素，该规则也优先。< / p>

您可以使用.dark增加!important规则的优先级：

.dark {
    background-color: #333333 !important;
}

然后您可以按预期使用hoverClass：

$("#dropDiv1, #dropDiv2, #dropDiv3").droppable({
    greedy: true,
    drop: function() {
        $(this).css("background-color", "black");    
    },
    tolerance: "pointer",
    hoverClass: "dark"
});

您会找到更新的小提琴here。

更改JQuery droppable over behavior

2 个答案: