CSS Challange drag drop tool box

Computer: Software & Programmierung HTML & CSS
#1

Hallo Leute,

schwierig aber sicher nicht unmöglich.
Wie kann man eine drag and drop box im Browser machen?
Die Challange ist, ich möchte diese auf mehreren Seiten machen um die Seiten mit Drag and Drop zu bearbeiten und man soll den Webseiten Inhalt von oben bis untern sehen können.
Das verwenden der CSS Regel position: absolute; führt dazu, dass der Webseiten manchmal hinter der Drag and Drop box verschwinden kann.

Wie kann man es daher machen das die gesamte Webseite mit scrollen über der Drag & Drop box sichtbar ist?

Vielen Dank für hilfreiche AW :slight_smile:

#2

Leider ist das so nicht ohne weiteres möglich. Das Dokument wird auch kleiner, wenn du Inhalte daraus absolut positionierst. Da brauchst du einen Platzhalter der die gerenderte Größe des Ursprünglichen Objektes hat, und das geht am einfachsten über JS.

Das ganze ist allerdings relativ aufwändig und in der Praxis läuft es meist darauf hinaus, dass ein drag&drop Element beim draggen unten fixed an das Dokument angehangen wird, und dem Mauszeiger folgt. Dazu kommen dann noch Drop-Zones, also Bereiche in die das Element dann wieder rein kopiert wird und das alte Element dann gelöscht werden kann. Soweit die Theorie. Ich rate dir dazu ein bestehendes Tool (JS Plugin) zu verwenden um die die Arbeit zu erleichtern.

Hier ist zum Beispiel eine Liste mit verschiedenen Drag & Drop Plugins für Javascript:
https://www.jqueryscript.net/blog/best-drag-drop.html