Jquery UI Droppable：如何根据某些逻辑使用不同的 hoverClass 值？

Posted 2023-05-08

【中文标题】Jquery UI Droppable：如何根据某些逻辑使用不同的 hoverClass 值？

【英文标题】：Jquery UI Droppable: How can I use different hoverClass values based on some logic?

【发布时间】：2013-02-19 23:27:52

【问题描述】：

我正在使用JQuery UI droppable 库功能，并且我想在用户将鼠标悬停在可放置目标上时提供视觉用户反馈。为此，我可以轻松地使用 hoverClass 选项来指定当它们有可拖动项目悬停时使用哪个类。

但我想做的是根据某些逻辑使用不同的hoverClass 值。基本上，有许多区域是“可拖放的”，并且有许多项目可以拖放 - 但是，并非所有项目都可以拖放到所有区域。因此，例如，如果 drop 有效，我希望有一个绿色背景，如果 drop 无效，则有一个红色背景。

如何做到这一点？我知道我想使用什么逻辑，但我可以在哪里添加逻辑。它显然需要在某个地方我可以访问被拖动的元素，以及潜在的放置目标元素。

到目前为止我的简单代码如下：

$(".DragItem").draggable(
    revert: true,
    helper: "clone"
);

$(".DropItem").droppable(
    tolerance: "touch",
    hoverClass: "DropTargetValid"
);

【问题讨论】：

这并不能直接回答您的问题，但听起来适合您的用例 - 您是否考虑过使用 scope/accept 选项将某些可拖动对象分配给某些可放置对象？然后你就不需要逻辑来确定 hoverClass - 它只会在可拖动接受 droppable 时被分配。

@freejosh：我认为这不允许我为“无效”掉落指定一个类。无论如何现在得到我的答案：D

【参考方案1】：

$(".DropItem").droppable(
    tolerance: "touch",
    hoverClass: "DropTargetValid",
    over: function(event, ui) 
       console.log(ui.draggable); // the draggable object
       console.log($(this)); // the droppable object
    
);

应该这样做。超过该事件将在所有 .DropItem 元素上触发。您可以在此处找到有关可用事件 API 的更多信息：http://api.jqueryui.com/droppable/

【讨论】：

我如何在这个over事件中更改hoverClass？

$(this).addClass('someClass');基于事件侦听器内部的逻辑。但请确保您使用激活或停用事件侦听器来重置类名。

所以你的意思是，在over 上，我自己添加了课程。然后在out 我可以删除课程吗？好的，我明白了，你是在暗示我根本不用担心hoverClass。我会试一试并报告

全部完成，谢谢！我已经发布了自己的答案，以便为未来的访问者（以及未来的我）提供更多信息

【参考方案2】：

我认为你的问题是试图用类本身来做，当 droppable 有自己的悬停事件时，称为overjQuery droppable API #over

所以你想要：

$(".DropItem").droppable(
    tolerance: "touch",
    over: function(event, ui) 
        // ... logic goes here
    
);

【讨论】：

谢谢，这正是我所需要的。尽管@lucassp 是您的选择，但您将不得不接受投票：P

哈哈，我知道——他的手指最快！谢谢:)

【参考方案3】：

其他答案正是我想要的。但是，我想在这里更详细地介绍一下如何处理逻辑的更好示例。

例如，有一些简单的 html，如下所示。这个 HTML 基本上有 4 个可拖动对象和 4 个可能的放置目标：

<div style="margin-bottom:20px;">
    <div data-id="1" class="DragItem">I am 1</div>
    <div data-id="2" class="DragItem">I am 2</div>
    <div data-id="3" class="DragItem">I am 3</div>
    <div data-id="4" class="DragItem">I am 4</div>
</div>
<div>
    <div data-id="123" class="DropItem">I accept 1, 2 and 3</div>
    <div data-id="23" class="DropItem">I accept 2 and 3</div>
    <div data-id="34" class="DropItem">I accept 3 and 4</div>
    <div data-id="1234" class="DropItem">I accept all</div>
</div>

可以看出，我使用了data-* 属性来存储特定的标识值。 DragItem 上的 ID 标识拖动对象，DropItem 上的 ID 包含所有有效值。

处理这个逻辑，然后应用正确的类的javascript如下：

$(".DragItem").draggable(
    revert: true,
    helper: "clone"
);

$(".DropItem").droppable(
    tolerance: "touch",
    over: function (event, ui) 
        var dropItem = $(this);
        var dragItem = $(ui.draggable);
        var valid = String(dropItem.data("id")).indexOf(dragItem.data("id")) > -1;
        if (valid) 
            dropItem.addClass("DropTargetValid");
         else 
            dropItem.addClass("DropTargetInvalid");
        
    ,
    out: function (event, ui) 
        var dropItem = $(this);
        dropItem.removeClass("DropTargetValid");
        dropItem.removeClass("DropTargetInvalid");
    ,
    deactivate: function (event, ui) 
        var dropItem = $(this);
        dropItem.removeClass("DropTargetValid");
        dropItem.removeClass("DropTargetInvalid");
    
);

可以看出，我正在做一个简单的“字符串是否包含”逻辑检查。这对于小数字来说很好，但如果需要处理超过 9 个对象，我们需要在 DropItem data-id 值中使用更可靠的字符串。

我还使用out 和deactivate 事件来清除应用的类。在此示例中，我复制了代码，但可以轻松地将其替换为两个事件都使用的单个函数。

终于等到了你们期待已久的那一刻，here is a working example.

【参考方案4】：

使用 Draggable Start/Stop 事件向您的放置区添加和删除类。

http://api.jqueryui.com/draggable/#event-start