jQueryUI abwerfbaren, die Ausbreitung zu überlappten Geschwister

Question

stoppen Wie Sie hier sehen können: http://jsfiddle.net/rA4CB/6/

Wenn ich den Abfall im Überlappungsbereich machen es in beiden droppables empfangen wird, gierig funktioniert nicht, wenn die Einzelteile sind Geschwister. Gibt es eine Möglichkeit, den Empfang von Droppables im zIndex zu blockieren?

BTW, mouseOver wird nicht für das Droppable-Element ausgelöst, da sich die Maus tatsächlich über dem ziehbaren Element befindet.

relevant 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!"); 
     } 
    }); 
}); 

Answer 1

Okay, so dass ich verbringen eine Stunde versucht, es herauszufinden, dann, sobald ich frage ich dann meine Antwort

http://jsfiddle.net/rA4CB/7/

Modified die JS finden zum folgenden:

$(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") 
     } 
    }); 
}); 

Answer 2

Ich hatte das gleiche Problem und machte einen kleinen pl ugin :)

, check it out:

https://stackoverflow.com/a/16720944/1308461

Answer 3

Ich finde, dass # invertedSpear Methode verwendet, wird dazu führen, UI-Zustandsänderung, die in einigen Fällen nicht erwünscht ist. Hier ist der Code.

var lastOpertion = new Date().getTime(); 

drop: function (event, ui) { 
     if (new Date().getTime() - lastOpertion < 100) return; 
     lastOpertion = new Date().getTime(); 
     .... 
} 

Answer 4

Wenn Sie eine Anzahl von abwerfbaren in einem Containerbereich haben dann was ????

Sie müssen für dieses Problem denken. Gierig funktioniert nur für Elternteil zu Kind Beziehung nicht in Geschwister. Sie müssen also Dropable Js bearbeiten oder Ihre eigene Logik dafür setzen.

Wenn Sie also eine Zahl von abwerfbaren haben, dann müssen Sie etwas mehr Code schreiben, auf perfekte abwerfbaren zu handhaben fallen, wie es in diesem Beispiel ist A number of siblings droppables

für einen perfekten Geschwister abwerfbaren ändern Ihre droppbale wie unten

 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;  
     } 

Answer 5

In bestimmten circonstances:

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:..., 
}) 

Answer 6

versuchen gierige Option in ui dropable. finden Sie auf der Geige Link unten für Demo:

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; 
    } 
}); 

Answer 7

$("#droppable").droppable({ 
    greedy: true, 
    drop: function(event, ui) { 
     if(ui.helper.is(".dropped")) { 
      return false; 
     } 
     ui.helper.addClass(".dropped"); 
    } 
}); 

Stellen Sie einfach eine CSS-Klasse auf ui.helper von ziehbar. Wenn das Ziehbare einmal akzeptiert wurde, wird es von allen anderen Ziehpunkten zurückgewiesen (könnte auch mit dem fallbaren "Annehmen" -Parameter erfolgen, wie accept : ":not(.dropped)" und der Klasse, die zu ui.draggable hinzugefügt wurde).

Answer 8

Also, wenn sie versuchen, einfache Lösung zu finden, ich kam mit dieser (und es funktioniert für mich):

  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; 
       } 
      }); 

Top Element, da gewählt werden würde es „über“ feuert die letzte. Außerdem - wenn es mehr als zwei Geschwister gibt - setzen wir das letzte als aktuelles Element. Zum Beispiel war das globale "Fenster". Bessere Option wäre die Verwendung von Klassen, da sie Daten sicher speichern kann.

Answer 9

Es ist sehr ähnlich zu inverseSpear Antwort. Ich hatte es ein wenig zu ändern, da die Aktivierung/Deaktivierung innen „über“/„out“ nicht für mich arbeiten .Ich unten statt

$("#droppable2").droppable({ 
    greedy: true, 
    drop: function (event, ui) { 
     $("droppable").droppable("disable"); 
    } 
} 

ich tun musste, mußte explizit „abwerfbaren“ div aktiviert, wenn Ich brauchte es. Aktivieren Sie es zum Beispiel beim Starten des Ziehereignisses.

zB

$("#drageMe").draggable({ 
start:function(event,ui){ 
    $("droppable").droppable("enable"); 

} })