OK, es wird peinlich, schon seit ungefähr fünf Stunden gesucht und probiert, und ich laufe nur im Kreis ...
Das Szenario ist einfach: Es ist das Header-Bild eines Benutzerprofils, es kann in eine Position gezogen werden und dann wird die oberste Position des Bildes in einer DB gespeichert.
Dank Beetoot-Beetroots "containment: 'parent'" bin ich bei diesem Code, der tatsächlich so reagiert, wie ich es möchte! Bis auf ein großes Problem. Das Bild springt einfach entweder nach oben oder nach unten. Es gibt kein reibungsloses Scrollen? Ändere ich das "Elternteil" in "Elternteil", scrollt es gut, aber ... das Containment ist natürlich nicht mehr da. Hilfe? : D
Das JS
%Vor%Also und last but not least ist der Header wie folgt enthalten:
%Vor%Wie ich schon sagte Stunden Googeln gab keine Ergebnisse - und wenn ich nicht die Ergebnisse speichern würde es gut funktionieren, aber na ja ...
- Bearbeiten -
Im Moment bin ich kurz davor zu schreien --.- Ich habe ein Kopfgeld auf dieses und die Hilfsmittel gesetzt, um mir zu helfen, aber ein Gastkonto auf meiner Webseite, das ist: Ссылка
Dort können Sie sich mit dem Benutzernamen auf die Seite einloggen: Gast und das pw gast - Klicken Sie oben rechts auf den Namen (gast) und Sie sehen das Profil - dort können Sie das headerpicture verschieben - und natürlich es sollte sich anders verhalten als es - help: (
Probieren Sie diese Geige aus.
Ich habe dem Ereignis drag eine if-Anweisung hinzugefügt, die die aktuelle Positionierung des Bildes überprüft und die aktuelle obere Position in ui.position.top setzt, wenn die Bedingung wahr zurückgibt, so dass das ziehbare Ereignis die obere Position nicht erhöht oder verringert während die Grenzen des div treffen. Auf diese Weise können Sie die Positionseigenschaften Ihrer Divs beibehalten.
Ivan,
Es ist schwer zu verstehen, warum der Code in einem benannten Funktions-Wrapper sein sollte. Wenn die Verschiebbarkeit nicht aktiviert oder deaktiviert werden muss, muss .draggable() nur einmal in einer $(function(){...}); -Struktur aufgerufen werden.
Es ist auch schwer zu verstehen, warum Sie statische Daten von PHP in Javascript schreiben müssen. Es sollte nichts über das ziehbare Bild sein, das javascript / jQuery nicht selbst herausfinden kann, indem es das DOM anfragt, und selbst dann ist nicht klar, warum dies notwendig sein könnte.
Ich würde erwarten, so etwas zu sehen:
%Vor% Siehe diese Geige für meine Lösung. Ich habe auch mit der linken und rechten Maustaste geblättert, was zu diesem Zeitpunkt nicht notwendig ist, aber in Zukunft nützlich sein könnte, wenn Sie ein Bild verwenden möchten, das größer ist als das übergeordnete Element. In Ihrem Fall hat Ihr Bild die gleiche Breite wie das übergeordnete Element, also habe ich ein threshold param hinzugefügt, damit vertikales Ziehen verwendet werden kann, ohne durch die getroffene rechte und linke Begrenzung abgebrochen zu werden.
Ich habe auch ein css für grab und grabbing cursors hinzugefügt, um einen ähnlichen Cursor-Effekt wie beim Ziehen eines PDFs zu erhalten, ist die Unterstützung für diese cursors leider in einigen Browsern (IE und chrome in meine Tests) aber firefox zeigt ihnen richtig.
Hier meinen Code einfügen, um einen zukünftigen Link zu verhindern.
HTML:
%Vor%CSS:
%Vor%JAVASCRIPT:
%Vor%Ich verwende diesen Code in meinem Projekt und es funktioniert gut. Ich habe die Lösung von QQping verwendet und eine kleine Änderung vorgenommen, um das Bild auch nach links und rechts zu bewegen. Ich hoffe es hilft ..
%Vor%Prost
Ich glaube nicht, dass Sie es in parent enthalten müssen, sonst können Sie es nicht außerhalb der Grenze parent nach oben ziehen
Alternativ bietet jQuery ui Eindämmung in zwei Koordinaten.
Probieren Sie diesen Code aus,
HTML
%Vor%JS
%Vor%