Add zIndex example to storybook basic/multi

[nigelskeels]

Is it possible to add an example to the storybook of how to manage the zIndex of multiple windows. So that the one being dragged is always on to just like the way os windows work.

Thanks

[rkaliyug]

I am working with multiple Rnd windows. Current dragged one is not coming on top of others. is there any workaround for this?

[ilovedesert001]

A feasible simple way

in your component

define manager

  const rndManagerRef = useRef({
    maxZIndex: "999",
    prevDraggedNode: null as HTMLElement,
    prevDraggedNodeZIndex: null as string
  });

then use this in onDragStart event

 (
    <Rnd
      key={item.key}
      default={{
        width: 200,
        height: 200,
        x: 800 * Math.random(),
        y: 300 * Math.random()
      }}
      resizeGrid={[24, 24]}
      dragGrid={[24, 24]}
      dragHandleClassName={"header"}
      onDragStart={(e, node) => {
        const manager = rndManagerRef.current;
        if (manager.prevDraggedNode) {
          manager.prevDraggedNode.style.zIndex = manager.prevDraggedNodeZIndex;
        }
        manager.prevDraggedNode = node.node;
        manager.prevDraggedNodeZIndex = manager.prevDraggedNode.style.zIndex;
        manager.prevDraggedNode.style.zIndex = manager.maxZIndex;
      }}
    >
      hello
    </Rnd>
  )

[ilovedesert001]

@rkaliyug

[rkaliyug]

Thanks ilovedesert001. I will check this one

[cgrange3875]

@ilovedesert001

Hello, That's an old topic but I have the same issue and wasn't able to solve it with your proposed solution. First I'm not using hook in my class so I just wanted to know where I should instanciate the refManager: as a state of the component? as a const in the render function? Moreover I have a app component containing 4 Rnd components. So should I create the refManager inside? Finally I have to set a ref with the refManager otherwise I get refManager.current as undefined, so should I set the ref as a prop of each Rnd components? Thanks for your help and answer.