React-sortable-hoc: While sorting, the item being sorted is invisible, unlike the example

[r3wt]

I am struggling to figure out why the item is invisible while dragging. My items are images with crossOrigin="Anonymous". In the examples, when you drag item, it becomes slightly translucent but not invisible. how can i have the same behavior in my example? should i switch to ul/li instead of div's, or what?

side note: i discover index prop is not passed to render, so i have to pass my own variable called i

const SortableItem = SortableElement(({ctx,value,index,i}) => {
    // index prop is not passed!!!
    console.log(ctx,value,i);
    //debugger;
    return(
        <div class="reorder-slide-item">
            <p class="p4 item-no">{i+1}</p>
            <img crossOrigin="Anonymous" src={value} alt="" onLoad={e=>ctx.getImageLightness(e,i)}  />
            <button class="button link item-remove" ref={ref=>ctx.btn[i]=ref} onClick={()=>ctx.removeItem(i)}>Delete</button>
        </div>
    )
});

const SortableList = SortableContainer(({ctx,items}) => {
  return (
    <div>
      {items.map((value, index) => (
        <SortableItem key={index} ctx={ctx} index={index} value={value} i={index} />
      ))}
    </div>
  );
});

[clauderic]

Please fork this sandbox https://codesandbox.io/s/react-sortable-hoc-starter-o104x95y86 and see if you can replicate the issue. If so, post back the link to your forked sandbox here and I will take a look.

[p45mark]

I had this same issue when putting the sortable list in a Modal component, and when dragging the draggable item was "behind" the modal. Setting the z-index to 9999 resolved it

[clauderic]

Yeah, as mentioned by @p45mark this is often a z-index issue. If you find that is the case, try applying a higher z-index value on the sortable clone using the helperClass prop.

[r3wt]

@p45mark thank you for the tip, i'm gonna try that out. @clauderic sorry for not getting back to you sooner, i had tried to load that codesandbox and it wouldn't work on friday, so i kinda forgot about it. if the suggestion of @p45mark doesn't work out, i will let you know. if you need to close this out i understand. thank you both for your help.

[josemigallas]

Using z-index fixed the issue 👍

[lmxx1234567]

Thanks all you guys❤️, I use helperClass and css with z-index to fix it

[r3wt]

@p45mark @clauderic i am in the position to be able to work on this again, and i'm having trouble understanding exactly what to do. I added helperClass='my-sortable' to my SortableList (which is a SortableContainer), but when i inspect element, i don't see this classname being applied anywhere. I also don't understand what node(s) i need to target with css. is it just .my-sortable?

---

edit nevermind, i finally figured it out. the helperClass is applied only during drag, so i just targeted the name of my sortable item and gave it a class of is-moving. it would be helpful to better explain this in docs i think. and yes, the z-index fixed my issue (