Droppable - hoverClass

Question

我正在使用jquery ui droppable和draggable。

请参阅此fiddle

当我将Container 4拖到droppable div（.container）时，hoverClass的工作方式为例外 - 如果是放置区，背景将为蓝色。

然而，当我拖动Container 3（内部容器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"
    })

Answer 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被拖动时，贪婪的设置对第3个容器不起作用。一旦我能解决这个贪婪的问题，我会更新相同的内容。