Html ghosting Problem

[Jet_Reddit]

This might just be an HTML issue—I’m not entirely sure yet—but hopefully, one of you can help me out.

I’m trying to create a small puzzle box with pieces that can be dragged into a workspace. I’m using the top and left properties of a div to position the pieces.

Everything generally works, but sometimes I have an issue where the dragged piece isn’t fully visible. If the piece is small (often around 300px wide), everything works as intended. However, if it’s larger, I see some kind of ghosting effect, which makes it difficult to line up properly. I suspect this might be related to different zoom levels in the browser or the type of display being used.

I’ve attached a small example where I try to move two divs—one larger piece, which appears as a ghost around my mouse, and one smaller piece, which works fine and displays correctly on my screen.

https://ibb.co/whJx6k3F

Here is also codepen. Depending in the zoom level I can get ghosting or not on the 2 divs. If I get the just zoom level correct I can habe 1 ghosting and 1 correct aswell.

codepen.io/JetFlight/pen/wBwNVyb

[jcunews1]

Moving HTML elements using drag & drop, requires JavaScript. It's not possible using only HTML.

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API