正如您在此处所见：http://jsfiddle.net/rA4CB/6/
当我在重叠区域中进行投放时，它会在两个投放中被接收，当项目是兄弟姐妹时，贪婪不起作用。有没有办法阻止zIndex中较低的droppable接收？
BTW，mouseOver不会为droppable元素触发，因为鼠标实际上是在可拖动元素上。
相关的JS：$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
tolerance:'pointer',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#droppable2" ).droppable({
tolerance:'pointer',
greedy:true,
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
答案 0 :(得分：13)
好的，所以我花了一个小时试图搞清楚，然后我一问我然后找到答案
将JS修改为以下内容：
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
tolerance:'pointer',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#droppable2" ).droppable({
tolerance:'pointer',
greedy:true,
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
},
over: function(event, ui){
$( "#droppable" ).droppable( "disable" )
},
out: function(event, ui){
$( "#droppable" ).droppable( "enable" )
}
});
});
答案 1 :(得分：5)
$( "#droppable" ).droppable({
greedy: true,
drop: function( event, ui ) {
if(ui.helper.is(".dropped")) {
return false;
}
ui.helper.addClass(".dropped");
}
});
只需在draggable的ui.helper上设置一个css类。如果draggable已被接受一次，那么所有其他droppable都会被拒绝（可以使用droppable＆＃34; accept＆＃34;参数，例如accept : ":not(.dropped)"，并且该类添加到ui.draggable）
答案 2 :(得分：2)
如果您在容器区域中有可放置的数量，那么????
你必须考虑这个问题。 贪婪仅适用于父母与子女之间的关系，不适用于兄弟姐妹。因此，您必须编辑droppable js或为其设置自己的逻辑。
因此，如果你有一些droppable，那么你必须编写一些额外的代码来处理完美的droppable，就像在这个例子中那样A number of siblings droppables
为了让完美的兄弟姐妹可以删除，请修改 droppbale ，如下所示
var topElement = undefined;
var topElementArray = Array();
$( "#draggable" ).draggable();
$( ".droppableBox" ).droppable({
activeClass: "active-droppable",
tolerance:'pointer',
over: function( event, ui ) {
// This is for only show a message that z-index must be required for proppable
// you can remove it after testing or after development
if ($(this).css("z-index") == 'auto') {
alert("Please provide z-index for every droppable.");
return;
}
//
topElement = undefined;
topElementArray = Array();
// Change it as you want to write in your code
// For Container id or for your specific class for droppable or for both
$('#demo > .droppableBox').each(function(){
_left = $(this).offset().left, _right = $(this).offset().left + $(this).width();
_top = $(this).offset().top, _bottom = $(this).offset().top + $(this).height();
if (event.pageX >= _left && event.pageX <= _right && event.pageY >= _top && event.pageY <= _bottom) {
topElementArray.push($(this).attr('id'));
}
});
},
drop: function( event, ui ) {
if (!topElement) {
topElement = determineTopElement(topElementArray);
}
if ($(this).attr('id') == $(topElement).attr('id')) {
$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
// Your code after successful dropped element on specific siblings
// Start writing code for dropped element & perfect droppable
}
}
});
determineTopElement = function(_array) {
var topElement;
var zIndexHighest = 0;
for (i = 0; i < _array.length; i++){
var element = $("#"+ _array[i]);
var z_index = $(element).css("z-index");
if( z_index > zIndexHighest){
zIndexHighest = z_index;
topElement = element;
}
}
return topElement;
}
答案 3 :(得分：1)
在某些情况下：
myjQuery.droppable({
over:function(evt,ui){
ui.draggable.attr('drg_time', this.drg_time = evt.timeStamp)
},
accept:function(draggeds){
if(draggeds.attr('drg_time'))
{
return draggeds.attr('drg_time') == this.drg_time
}
return draggeds.hasClass('acceptable_classes_here')
},
out:function(evt,ui){
// useless but cleaner
ui.draggable.removeAttr('drg_time')
}
drop:...,
})
答案 4 :(得分：0)
答案 5 :(得分：0)
我发现使用#vertedSpear的方法会导致UI状态改变，这在某些情况下是不可取的。这是代码。
var lastOpertion = new Date().getTime();
drop: function (event, ui) {
if (new Date().getTime() - lastOpertion < 100) return;
lastOpertion = new Date().getTime();
....
}
答案 6 :(得分：0)
所以，当我试图找到简单的解决方案时，我想出了这个（它对我有用）：
window.overNowOnThis = "";
window.olderOnes = [];
$obj.droppable({
accept: ".draggable_imgs",
drop: function(e, ui) {
if(window.overNowOnThis == this){
// Do whatever
}
},
over: function(event, ui){
window.olderOnes.push(window.overNowOnThis);
window.overNowOnThis = this;
},
out: function(){
var lastElem = window.olderOnes.pop();
window.overNowOnThis = lastElem;
}
});
将选择顶部元素，因为在它上面＆＃34; over＆＃34;解雇最后一个。另外 - 如果有两个以上的兄弟姐妹 - 那么当移出元素时，我们将最后一个设置为当前。使用全球＆＃34;窗口＆＃34;是例如。更好的选择是使用类，因为它可以安全地保存数据。
答案 7 :(得分：0)
它与invertedSpear的回答非常相似。我不得不改变它一点，因为在“over”/“out”内启用/禁用对我来说不起作用。我不得不在下面做
$("#droppable2").droppable({
greedy: true,
drop: function (event, ui) {
$("droppable").droppable("disable");
}
}
我必须在需要时明确启用“droppable”div。例如，在启动拖动事件时启用它。例如
$("#drageMe").draggable({
start:function(event,ui){
$("droppable").droppable("enable");
} }）
答案 8 :(得分：-1)
在ui droppable中尝试贪心选项。请参阅下面的小提琴链接以获取演示：
http://jsfiddle.net/creators_guru/3vT5C/embedded/result/
$( ".circles" ).droppable({
greedy: true,
drop: function( event, ui ) {
$_data = ('drgged class = ' + ui.draggable.attr('class'));
$_data1 = ('droped id = #' + $(this).attr('id'));
$('#data').html($_data + '<br/>'+$_data1);
return false;
}
});