Droppable - hoverClass答案

【问题标题】：Droppable - hoverClassDroppable - hoverClass
【发布时间】：2014-07-10 09:32:28
【问题描述】：

我正在使用 jquery ui 可拖放和可拖动。

看到这个fiddle

当我将 Container 4 拖到可放置的 div (.container) 时，hoverClass 会正常工作 - 如果是放置区，则背景将为蓝色。

但是，当我拖动 Container 3（其中包含 Container 4）时，hoverClass 不起作用 - 背景始终为红色，但如果我掉入红色区域，则接受放置。

＃＃＃编辑：＃＃＃ **这适用于 Chrome！ Firefox 和 IE 不工作！**

编辑 2：

尝试先拖动内部容器（不放置）时会出现此问题。之后悬停类不适用

那么当我通过拖放进行拖动时，我必须怎么做才能激活 hoverClass？

提前致谢！

HTML：

<div class=drag>
<div>Container-1</div>
<div class=container>
    <div class=drag>
        <div>Container-2</div>
        <div class=container>
            <div class=drag>
                <div>Container-3</div>
                <div class=container>
                    <div class=drag>
                        <div>Container-4</div>
                        <div class=container></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.drag {
    padding:10px;
    border:1px solid black;
    background-color:white;
}
.container {
    margin-left:30px;
    padding:20px;
    background-color:red
}

.drag + .drag{
    margin-top:10px
}

.drop-area{
    background-color:blue;
}

Javascript：

$(".drag").draggable({
        appendTo: "body",
        revert: true,
        opacity:0.9,
        start: function(){
            $(this).attr("oldZIndex",$(this).css("z-index"));
            $(this).css("z-index", 3000);
        },
        stop:function(){
            $(this).css("z-index", $(this).attr('oldZIndex'));
        }
        /*helper: "clone"*/
    });
    $(".container").droppable({
        drop: function(event, ui) {
            console.log($(this), ui.draggable);
            $(this).append(ui.draggable);
        },
        hoverClass: 'drop-area',
        greedy: true,
        tolerance: "pointer"
    })

【问题讨论】：

刚刚在 IE11 和 FF30 上测试过，效果很好。您测试的版本是什么？
我也用IE11和FF30。当我将容器 3 拖放到容器 1 中时，容器 1 永远不会变蓝，始终是红色（未应用 hoverClass）。但是如果你将容器 4 拖放到容器 1 中，容器 1 会变成蓝色（应用了 hoverClass）
好吧，我再次测试了它，就像一个魅力。不知道你那边发生了什么。
此处截图i.imgur.com/k5GKu0z.png
对不起，你是对的！我现在才注意到！如果您尝试将 container3 直接移动到 container1，则 hoverClass 可以工作。但是，如果您尝试拖动 container4（没有任何地方放置）并在将 container3 移动到 1 后尝试，则悬停类不起作用。

标签： jquery html css jquery-ui jquery-ui-droppable

【解决方案1】：

我还在研究这个。但中间解决方案是下面的代码。我已将 active-class 设置添加到 droppable 事件中。

$(".drag").draggable({
        appendTo: "body",
        revert: true,
        opacity:0.9,
        start: function(){
            $(this).attr("oldZIndex",$(this).css("z-index"));
            $(this).css("z-index", 3000);            
        },
        stop:function(){
            $(this).css("z-index", $(this).attr('oldZIndex'));
        }
       /* helper: "clone"*/
    });
    $(".container").droppable({
        drop: function(event, ui) {
            console.log($(this), ui.draggable);
            $(this).append(ui.draggable);           
        },
        hoverClass: 'drop-area',
        activeClass: 'drop-area',
        greedy: true,        
        tolerance: "pointer"



    })

但问题仍然存在，当外部 div 被拖动时，贪婪设置不适用于第三个容器。一旦我可以解决贪婪的问题，将更新相同的内容。

【讨论】：