jQuery / JavaScript Kollisionserkennung

Seine ein wenig spät, aber ich denke, man könnte diesen Ansatz verwenden, die ich versuchte, wenn ich Stand vor der ähnlichen situation. Der Vorteil hier ist, dass es keine zusätzlichen plugins oder scripts eingebunden und auch nicht, Sie einzuführen, Leistung hungrig in polling.
Diese Technik verwendet die der built-in Methoden und Ereignisse, die die Jquery-abwerfbaren zu bieten hat.

Ok, genug gesagt, hier ist die Lösung-Technik:
Sagen, wenn Sie zwei Elemente (Bilder in meinem Fall), und Sie nicht möchten, dass Sie sich überlappen oder erkennen, wenn Sie das tun, stellen Sie die beiden Elemente einer abwerfbaren und machen Sie zu "akzeptieren" jeder andere:

$([div1, div2]).droppable(CONFIG_COLLISSION_PREVENTION_DROPPABLE);

'CONFIG_COLLISSION_PREVENTION_DROPPABLE' sieht wie folgt aus:

var originatingOffset = null;
CONFIG_COLLISSION_PREVENTION_DROPPABLE = {
    tolerance: "touch",
    activate : function (event, ui) {
        //note the initial position/offset when drag starts
        //will be usedful in drop handler to check if the move
        //occurred and in cae overlap occurred, restore the original positions.
        originatingOffset = ui.offset;
    },
    drop : function (event, ui) {
            //If this callback gets invoked, the overlap has occurred. 
            //Use this method to either generate a custom event etc.

            //Here, i used it to nullify the move and resetting the dragged element's 
            //position back to it's original position/offset
            //(which was captured in the 'activate' handler)
        $(ui.draggable).animate({
            top: originatingOffset.top + "px",
            left: originatingOffset.left + "px"
        }, 300);
     }
}

Den 'aktivieren' - und 'drop' - Handler finden Sie im Abschnitt "dropactivate' und 'drop' - events von "abwerfbaren" plugin

Hier, der Schlüssel ist die 'drop' - callback. Sobald die zwei Elemente überlappen, und Sie werden gelöscht, die einen über die anderen, die 'drop' aufgerufen wird. Dies ist der Ort zu erkennen und Maßnahmen zu ergreifen, kann das senden von benutzerdefinierten Ereignissen oder Aufruf von anderen Aktionen (die ich hier wählte, um wieder das überlappende element-Position zu der ersten position bei der drag gestartet, das war gefangen in 'aktivieren', callback).

Das ist es. Keine Umfragen, keine plugins, nur die built-in events.

Gut, es können auch andere Optimierungen/Erweiterungen, die es geschafft, das war einfach der erste Schuss aus meinem Kopf, hat geklappt 🙂

Können Sie auch die 'dropover' und 'dropout' - Ereignisse zu signalisieren, und erstellen Sie eine visuelle Rückmeldung an den Benutzer, dass zwei Elemente sich überlappen, während Sie immer noch in Bewegung.

var CLASS_INVALID = "invalid";
//.invalid { border: 1px solid red; }
...
$.extend(CONFIG_COLLISSION_PREVENTION_DROPPABLE, {
   over : function (event, ui) {
        //When an element is over another, it gets detected here;
        //while it may still be moved.
        //the draggable element becomes 'invalid' and so apply the class here
        $(ui.draggable).addClass(CLASS_INVALID);
    },
    out : function(event, ui) {               
         //the element has exited the overlapped droppable now
         //So element is valid now and so remove the invalid class from it
         $(ui.draggable).removeClass(CLASS_INVALID);
    }
});

Hoffe, das hilft!

InformationsquelleAutor der Antwort Murtaza H

Ich lief in dieses verallgemeinerte Problem mich, so (full disclosure) machte ich ein plugin für Sie. Für einfache Kollision Abfragen über statische Objekte, versuchen Sie dies:

http://sourceforge.net/projects/jquerycollision/

Die es dir erlaubt, eine Liste von überlappenden Kollision Boxen (oder keine, wenn es keine Kollision):

hits = $("#collider").collision(".obstacles");

Oder eine Kollision während "ziehen", verwenden Sie diese:

http://sourceforge.net/apps/mediawiki/jquidragcollide/?source=navbar#collision

Die Ihnen eine "Kollision" - Ereignis zu verbinden. (Oder einen "Vorsprung" - Ereignis, um zu sehen, ob ein div entkommt ein weiteres div, derzeit enthält es.)

$(draggable).bind( 
   "collision",
   function(event,ui) {
      ...
   }
);

Wenn Sie die überprüfung von Kollisionen während der Bewegung andere als ziehen, rufen Sie einfach die original wiederholt, es ist ziemlich schnell. Hinweis: das ziehen, das man nicht schön spielen mit Größenänderung.

InformationsquelleAutor der Antwort eruciform