draggable elemente auf Website einbinden für ein bissl gamification

[Rolf B]

Hallo calimero,

Drag & Drop kann man auf zwei Arten umsetzen. Zum einen mit Hilfe des draggable-Attributs von HTML5, der verlinkte Wiki-Artikel schreibt einiges darüber.

Allerdings: dann bekommt man, so wie bei Dir, während des Drag ein "Geisterbild" gezeigt, das teiltransparent und verkleinert ist. Ein "live drag", so wie bei einem Desktop-Fenster, ist das nicht.

Zum HTML5-Drag&Drop gehört eine entsprechende Eventbehandlung, die ist im Wiki-Artikel beschrieben.

Das, was Du gemacht hast, ist die andere Art: Drag&Drop "handgemacht". Das bietet die Möglichkeit, HTML Elemente live zu verziehen, statt ein Drag-Image durch die Gegend zu bewegen.

Bei Dir überlappen sich aber die beiden Techniken. <img>-Elemente sind nämlich von Haus aus HTML5-Draggable und das musst Du erstmal verhindern, damit deine eigene Logik greift. Gib jedem img Element das Attribut draggable="false".

Nächste Punkt ist: Dein Pen ist kaputt. Was Du im Style und Script-Bereich einträgst, braucht kein <style></style> oder <script></script>. Hast Du den Pen nicht getestet?

Weiter: Dein transform:rotate funktioniert nicht. Du setzt die Bilder in <div> Elemente. Diese sind zunächst einmal so breit wie ihr Elternelement. Die Bilder stecken aber an ihrem linken Rand. Die Rotation wirkt auf das div, nicht auf das img, und dadurch werden die Bilder an einer langen Stange gedreht, d.h. sie verschieben sich auch. Maßnahmen:

• nimm von den Bildern das height:auto aus dem Style, das steht schon im CSS. Die width lass dran. Überlege Dir aber ein sinnvolles alt-Attribut. Diese Bilder sind NICHT rein dekorativ.
• gib den draggable-divs per CSS ein width:fit-content;

Sodann führst Du einen Positionskrieg. Im CSS steht, dass .draggable-Elemente position:absolute sein sollen. Da bin ich dafür. In den style-Attributen, die Vorrang vor CSS haben, machst Du das mit position:relative wieder kaputt. Wenn Du möchtest, dass diese Elemente verschiebbar sind, sollten sie absolut positioniert sein, nimm das position:relative also aus den styles der draggable-Elemente heraus. Danach musst Du die Positionen der draggable-divs neu bestimmen.

Du rotierst die draggable-Elemente. Das führt beim Mousemove zu Rechenfehlern. Gib den .draggable divs einen schwachen Hintergrund, dann siehst du, was da passiert. Lösung: Rotiere nur die img Elemente im .draggable, dann ruckelt es beim ersten Move nicht mehr.

Die @media-Abfrage ist übrigens verwirrend. Auf einem schmalen Viewport verschwinden die draggables komplett.

Und dein drag-grid ist sinnlos. Die draggables sind keine Kindelemente davon.

So, ich hoffe, ich habe jetzt alles aufgeschrieben was ich in deinem Pen gefixt habe.

Rolf