jquery - 可放置 - hoverClass

Question

我正在使用 jquery ui droppable 和 draggable。

查看此 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"
    })

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 时，贪婪设置对第三个容器不起作用。一旦我可以解决贪婪问题，就会更新相同的内容。