'Why HTML draggable element drags with parent background?

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?

htmlcss


Solution 1:[1]

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:

6.8.5 Processing model

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.

Solution 2:[2]

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>

Solution 3:[3]

you can add css style to your draggable element it will remove parent background:

transform: translate(0, 0);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 t.niese
Solution 2 ROOT
Solution 3 saumya nigam

Related Questions