Wenn mir irgendjemand helfen könnte, herauszufinden, wie man die ziehbaren Elemente in einem div erstellen kann, dessen Skalierung sich an der Fenstergröße orientiert, würde ich jede Anleitung sehr schätzen.
Wenn ich das tue:
%Vor% Was passieren wird, ist, dass es mir die Sicherheit für die normale Größe des Containers gibt. Also, wenn ich ein transform: scale(1.5) habe, wird Platz im Container sein, den das ziehbare Element nicht gehen kann.
Ich habe auch containment: 'parent' ausprobiert, aber das ist sehr glitschig.
BEARBEITEN
Ich habe herausgefunden, wie man den oberen und linken Containment erreicht, aber ich kann nicht herausfinden, wie man den rechten und unteren Bereich erreicht.
%Vor% Ich habe width und height aus containmentArea[0].getBoundingClientRect() versucht, aber das scheint auch nicht die richtige Entscheidung zu sein.
Eine Version mit dem Zurücksetzen der Koordinaten im Ziehereignis (da sie bereits für die Skalentransformationen neu berechnet wurden), ohne das Containment zu verwenden:
%Vor% Im Beispiel werden Breite und Höhe des Containers innerhalb des Dragagevent erhalten. Sie können diese auch speichern, wenn Sie für eine bessere Leistung skalieren. Wenn sie innerhalb des Ereignisses berechnet werden, funktionieren sie immer noch nach der Neuskalierung, obwohl die prozentuale Variable noch festgelegt werden muss. Um wirklich generisch zu sein, könnte es auch innerhalb des Ereignisses erhalten werden (und anstelle eines festen Containers könnte ui.helper.parent () verwendet werden)
Da der Versatz innerhalb des Dragagets (0,0) bezogen auf den Container ist (zumindest für den aktuellen Setup), wurde die Vereinfachung von originalleft + (position - originalposition)/percent zu position / percent erlaubt.
Der Start-Offset schien nicht mehr notwendig zu sein, also wurde er in der Geige weggelassen, kann aber bei Bedarf neu hinzugefügt werden.
Sieh dir das an:
Der bearbeitete Code ist folgender:
%Vor%Wie Sie sehen, ist hier der Trick:
%Vor%Ihre rechte maximale Position ist: Der Hauptcontainer links offset + die wahre Breite des Containers (mit Skala) - der Artikel wahre Breite (um es in den Container zu lassen).
(Tipp: Sie können den "prozentualen" var-Wert beliebig ändern, um die Ergebnisse zu sehen)
Tags und Links javascript jquery jquery-ui jquery-draggable jquery-droppable