jQuery UI - Wie kann man wissen, ob sich das gezogene Element auf Element #x befindet?

Question

Ich habe mehrere ziehbare Elemente und ich möchte nicht, dass sie übereinander fallen. Ich möchte, dass das gezogene Element beim Ziehen hellgrün erscheint, aber sobald es sich über einem Element mit einer bestimmten Klasse befindet, wird es rot. Wenn es fallen gelassen würde, würde es in seine ursprüngliche Position zurückkehren.

Alles andere ist einfach, aber ich würde ein Ereignis für das "Eingeben" eines anderen Elements benötigen.

Ich habe keine integrierte Funktion oder ein Plugin gefunden, um mein Problem zu lösen.

Ich kann mir keine andere Möglichkeit vorstellen, dies selbst zu tun, als alle Positionen und Größen der Elemente zu erfassen und sie dann mit dem Drag-Event zu vergleichen. Es wäre jedoch so schwer, dass das Ziehen schmerzhaft wäre.

Also, irgendwelche Vorschläge? Ein Plugin habe ich vielleicht nicht gefunden? :)

Answer 1

Ich bezweifle, dass ein Plugin erforderlich ist. Sie haben kein Drag/Drop-Verhalten beschrieben, das sich von dem unterscheidet, das bereits mit der Vanilla jQuery UI verarbeitet werden kann.

Von dem, was ich verstehe, haben Sie eine Reihe von Draggables, die einen gemeinsamen Zweck haben, aber ihre Droppables müssen sich ändern, je nachdem, welche gezogen wurde. Alles, was benötigt wird, ist in die Start Ereignis der ziehbaren zu haken und ändern Sie die Option Optionen der Droppables, die Sie möchten, dass sie mit arbeiten.

Wenn ich selbst einen Schnelltest durchführe, scheint es nicht so, dass jQuery UI mehr CSS-Klassen in den Drag-helfer einfügt, wenn es sich über einem Droppable befindet, so dass Sie kein reines CSS verwenden können, um die Farbe des Helfers zu ändern über einen Droppable.

Aber anstatt in die Drag Methode des ziehbar, welches Element ständig zu überwachen von Einhaken es vorbei ist, können Sie einfach die über und aus Methoden Ihrer droppables eine Klasse der hinzufügen und entfernen ziehbarer Helfer. Da Sie die Akzeptieren Optionen auf Drag-Start (wie ich zuvor beschrieben), über Methode wird nur auf Elemente, die Sie die Farbe des Helfers ändern wollen aufgerufen werden.

Entschuldigung, ich habe keine Code-Beispiele gepostet, aber hoffentlich ist die Erklärung hilfreich.