我有一個大的jQuery UI droppable，被其他元素覆蓋。當我將draggable懸停在實際上掩蓋了droppable的元素上時，droppable仍然收到ui-state-hover類。我們如何避免這種情況？jQuery UI：拒絕拖放部分覆蓋可拖放？
看起來沒有機會實施droppable s.t.的accept函數。它通過光標座標來決定，至少我不能得到它的工作：如果返回false一次，它將不會再被查詢，直到光標重新進入被遮蔽的droppable。
不確定是否有原生的方式。但是，您也可以使覆蓋元素droppable以及over和out禁用並啓用「真實」droppable。像這樣的例子：
$('#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();#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;
}<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>您還可以添加行爲，可放開，以便更容易調用。像這樣的例子：
$.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();#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;
}<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>