Question

我有一个大的jQuery UI droppable，它被其他一些元素覆盖。当我将draggable悬停在实际隐藏droppable的元素上时，droppable仍会收到ui-state-hover类。我们怎么能避免这种情况？

似乎没有机会实现accept s.t的droppable功能。它由光标坐标决定，至少我无法使其工作：如果它返回false一次，则在光标重新进入模糊的droppable之前不会再次查询。 / p>

Answer 1

不确定是否有本地方式。但您也可以制作叠加元素droppable，并在over和out上禁用并启用“真实”＆＃39; droppable。像这样举例如：

＆＃13;

$('#droppable').droppable({
    accept: '#draggable:not(.overObscure)',
    greedy: true,
    overlay: 'ha',
    drop: function (e, ui) {
        console.log(this)
    }
});

$('#overlay').droppable({
    accept: '#draggable',
    over: function (e, ui) {
        ui.draggable.addClass('overObscure');
    },
    out: function (e, ui) {
        ui.draggable.removeClass('overObscure');
    }
});


$('#draggable').draggable();

＆＃13;

#droppable {
    width: 300px;
    height: 300px;
    background-color: #ddd;
}
#overlay {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: blue;
}
#draggable {
    width: 25px;
    height: 25px;
    background-color: yellow;
}

＆＃13;

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<div id="droppable"></div>
<div id="overlay"></div>
<div id="draggable"></div>

＆＃13;

您还可以将行为添加到droppable，以便更容易调用。像这样举例如：

＆＃13;

$.widget("ui.droppable", $.ui.droppable, {
    _create: function () {
        var that = this;
        this._super();
        $(this.options.overlay).droppable({
            accept: this.options.accept,
            over: function (e, ui) {
                that.options.disabled = true;
            },
            out: function (e, ui) {
                that.options.disabled = false;
            }
        });
    }
})

$('#droppable').droppable({
    accept: '#draggable',
    greedy: true,
    overlay: '#overlay',
    drop: function (e, ui) {
        console.log('dropped')
    }
});

$('#draggable').draggable();

＆＃13;

#droppable {
    width: 300px;
    height: 300px;
    background-color: #ddd;
}
#overlay {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: blue;
}
#draggable {
    width: 25px;
    height: 25px;
    background-color: yellow;
}

＆＃13;

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<div id="droppable"></div>
<div id="overlay"></div>
<div id="draggable"></div>

＆＃13;

jQuery UI：在部分覆盖的droppable中拒绝拖动？

1 个答案: