Question

I have a simple example where I am trying to drag an element inside another element with a fixed position. Once I drop the element inside the fixed (or absolute) position container, the element is no longer draggable.

Does anyone have any thoughts? I’m thinking this might be a bit of an issue if any fixed/absolute positioned containers cause draggable elements not to function properly. See my JS Bin.

http://jsbin.com/igiqan

Answer 1

This has actually nothing to do with the fixed position.

Your draggable element has a lower implicit z-index based on the DOM tree. So when you drag it onto the drag area, it is below it.

Give it an explicit z-index so it is frontmost:

.box
{
    width: 20px;
    height: 20px;
    color: #c40000;
    background-color: #c40000;
    z-index: 100;
}

DEMO