z-ndex

[Sergey-Shar]

trafficstars

Hello everyone.

I have several draggable elements on the page. I need to change the z-index in it by clicking on an element so that it appears on top. To do this, I passed styles to the div inside the DND wrapper, but it doesn't help.

Tell me how I can influence the z-index. Thanks!

[Mae6e]

hi. i have MainContext. in Maincontext.Provider set default value of z-index.

code:

export const MainContext = react.createContext({
    zIndexNote: 1,
    changezInde: (e) => { }
})
const MainContextProvider = (props) => {
    const [highzIndexNote, setHighzIndexNote] = useState(1)

    const highzIndexNoteHandler = (index) => {
        setHighzIndexNote(index)
    }
    return (
    <MainContext.Provider value={{ zIndexNote: highzIndexNote, changezInde: highzIndexNoteHandler }}>
          {props.children}
    </MainContext.Provider>)
}

when draggable element start add z-index item. code:

const onStartHandler = () => {
   nodeRef.current.style.zIndex = mainContext.zIndexNote;
   mainContext.changezInde(mainContext.zIndexNote + 1)
}