Ich mache eine Drag-and-Drop-Engine in JavaScript, und ich weiß nicht, wie ich die richtige Position von dragObj festlegen soll, da sie sich abhängig vom Positionierungstyp des Elternelements ändert (ändert sich auch das dragObj abhängig von dessen Eltern) "Elternelement" ect.?).
Also, mein dragObj sieht so aus:
%Vor% Also, wenn ich ein dragObj mache, setze ich auch seine "position" und seine bounding element . In einem Kommentarteil, kurz bevor ich die Attribute .minBoundX und .minBoundY gesetzt habe, erkläre ich, wie ich sie setzen möchte; Es funktioniert jedoch nicht, da die Funktion findPos () nicht funktioniert.
Hier ist die Funktion findPos ():
%Vor% Ich glaube, dass diese Funktion funktioniert, wenn bounding element position: absolute; gesetzt hat, aber ich möchte, dass der Benutzer seinen Positionierungstyp einstellen kann. Außerdem wird bounding element durch die Klasse .bound und dragObj durch die Klasse .drag festgelegt.
Hier ist der HTML-Code:
%Vor%Und hier ist das CSS:
%Vor%Und hier ist der gesamte Motor:
%Vor%Ich habe auch ein bequemes Spiel für Sie gemacht: Ссылка
Also, wie mache ich eine findPos () -Funktion, die verschiedene Arten der Positionierung ermöglicht. Muss ich eine weitere findPos () - Funktion ausführen, damit das dragObj auch irgendeine Art von Positionierung sein kann?
Wichtig Bitte empfehlen Sie nicht, eine Bibliothek zu verwenden (es sei denn, Sie schlagen vor, Tipps für den Umgang mit der Positionierung zu geben). Der Grund ist, dass ich gerade die Sprache lerne und mir hilft, Dinge zu bauen mach das genau. Was ist der Sinn darin, eine Bibliothek zu lernen, bevor ich die Sprache überhaupt verstehe?
Am wichtigsten, ich schätze Ihre Hilfe sehr. Danke.
Bei der Entwicklung von Javascript ist jQuery wirklich dein bester Freund, da es viele dieser (möglicherweise lästigen) Aufgaben vereinfacht. Ich grabe total den Wunsch, ohne sie zu lernen; es ist ein guter Weg, um kompetent zu werden.
Sehen Sie sich die Dokumente und die Implementierung von jQuery für position und offset an, und hoffentlich gibt Ihnen das eine gute Idee für einen Startplatz.
Dokumente:
Quelle:
Ich weiß nicht, ob das genau das ist, was Sie brauchen, aber das Implementieren von Drag & amp; Drop mit Javascript erfordert eine Menge Aufwand und Tests, besonders wenn Sie mit Eltern-Kindern arbeiten.
Versuchen Sie Folgendes:
Vielleicht können Sie seinen Quellcode lesen und ihn Ihren Anforderungen entsprechend verwenden.
Wenn Sie mit der Position des Elements arbeiten, verwenden Sie dessen offsetLeft(/Top) . Und jedes Element hat eine offsetParent von wo diese Position stammt. Wenn Sie ein Element ziehen, ist es gut zu wissen, dass es sich um eine Position handelt, die dem gesamten Dokument entspricht (lesen), sodass Sie einen präziseren Punkt erhalten. Um eine Elementeposition zu finden, müssen Sie die folgende Funktion erstellen:
Aber ich stimme einigen anderen zu, dass jQuery eine Menge dieser langwierigen Berechnungen vereinfacht. Aber ich denke wirklich, dass es am besten ist, JS kennenzulernen, bevor Sie die APIs verwenden, da Sie dadurch verstehen, was JS wirklich ist.
PS. Rufen Sie diese Methode nicht für jedes mousemove -Ereignis auf, da dies die Leistung beeinträchtigt. Intead speichert den Wert für das Element ( <your node>["startoffset"] = findPos(<your node>) ) und verwendet ihn dann im Skript mousemove, um seine neue Position zu finden. Eigentlich ist es eine gute Übung, so viele Werte wie möglich auf mousedown zu speichern, da mousemove ALOT heißen wird und daher möglichst wenig Berechnungen / Traversierungen durchführen soll.
Einfachste Lösung:
Setzen Sie das Element auf visibility:hidden . Klonen Sie das Element, stellen Sie den Klon auf position:absolute , führen Sie Ziehen durch. Sobald das Ziehen beendet ist (d. H. Der Benutzer hat die linke Maustaste losgelassen), ersetzen Sie den Klon durch das ursprüngliche Element.
Damit können Sie das Element für die Dauer des ziehbaren Vorgangs im Fluss halten. Auf diese Weise können Sie, wenn das Element nicht an der Position y abgelegt werden kann (zum Beispiel), den Helper an den ursprünglichen Ort zurückschnappen lassen.
Tags und Links javascript html css drag-and-drop