I have a draggable DIV without background inside DIV container with background:
<div style="width: 200px; height: 200px; background: red">
<div style="width: 100px; height: 100px; border: 1px solid black" draggable="true">
div without background
</div>
</div>When I drag the inner DIV, for some reason it moves with the parent background. Is it possible to drag the inner DIV with transparent background?
Seems for some reason draggable="true" force the div to inherit the parent background attribute, a fix is to use position on the <div> with z-index, not sure if there is another way to fix, but here is a working snippet:
[draggable="true"] {
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
z-index: 1;
}<div style="width: 200px; height: 200px; background: red;">
<div style="width: 100px; height: 100px; border: 1px solid black;" draggable="true">
div without background
</div>
</div>The standard and living standard don't define how the drag data store default feedback has to look like, it is just mentioned as this:
Update the drag data store default feedback as appropriate for the user agent (if the user is dragging the selection, then the selection would likely be the basis for this feedback; if the user is dragging an element, then that element's rendering would be used; if the drag began outside the user agent, then the platform conventions for determining the drag feedback should be used).
As of that, it is browser and possibly also system dependent.
If you want to control how it looks like you need to manually define it using setDragImage(element, x, y), on DataTransfer object.
you can add css style to your draggable element it will remove parent background:
transform: translate(0, 0);