React-sortable-hoc: Selected Element getting disappeared

[Miteshdv]

Hi ,
Whenever i try drag an element the element disappears and after drag finish the element appears.
Please help me. Component is excellent and perfect

Thanks

[Miteshdv]

Ok the issue is my Sortable component is inside react-boostrap Modal component.
The dragged component is behind the Popup,
Can you please help me

[clauderic]

You can add the helperClass prop to your enhanced SortableContainer component to style the helper and give it a higher z-index value.

For example:

render() {
 return (
   <SortableList helperClass='sortableHelper' />
  )
}

And then in your css:

.sortableHelper {
   z-index: 10;
}

[Miteshdv]

I did the same its not working :(

[clauderic]

You'll need to adjust the z-index to your specific use case. If in doubt, just try incrementing the value until it starts working (for instance, try z-index: 9999, or even higher)

[Miteshdv]

Hmm Thanks for reply , its still not working . i have one question , the dragged mini opaque element that appear . Is it part of SortableList ? or it is is also a some popup? . because i am suspicious that react-bootstrap popup is making it self at the highest z order. But i have no way to debug

[Miteshdv]

Ok This worked item-${index}} index={index} value={fieldName} style = {{zIndex: 100000}}/>
Can u please tell me why the above mentioned way worked and sortableHelper class on sortbale list didnt ?

[clauderic]

The above applies the style directly on the element, which then gets cloned and appended to the document.body element when you start sorting (this is the sortable helper).

The above mentioned solution instead adds a class of your choice to the helper at the moment when it is cloned.

Both should work, I'd need to see some code to diagnose why the first option isn't working for you.

[Miteshdv]

https://github.com/Miteshdv/Form-Creator/blob/master/formElementsReorder/FormReOrderView.jsx you can go to Miteshdv/form-creator on github download project npm install nd check it pls

[microdou]

@Miteshdv @clauderic I had the same problem with Popover in react-bootstrap. z-index has to be marked with !important to override bootstrap styles.

.sortableHelper {
   z-index: 10000 !important;
}

[Sachem]

@Miteshdv as this element that you drag is appended at the end of the BODY, make sure you don't put the definition of .sortableHelper in the scope of some other CSS class (like you probably do with the styles for the elements) as it will simply not work.

[Pyot]

For me, it works when I add to class to li tag:

const SortableItem = SortableElement(({value}) =>
  <li className="sortableHelper">{value}</li>
);

and CSS

.sortableHelper {
   z-index: 9999;
}

if a style of a draggable element does not satisfy you. Please make adjustment in .sortableHelper

[waynebloss]

Inside of a material-ui modal, this worked nicely:

// file `ReorderThingsForm.styles.js`
import { makeStyles } from "@material-ui/core";

export const useStyles = makeStyles(
  theme => ({
    sorting: {
      zIndex: theme.zIndex.modal + 100,
    },
  }),
  {
    classNamePrefix: "ReorderThingsForm",
  },
);

// file `ReorderThingsForm.jsx`
import ...;
import { useStyles } from "./ReorderThingsForm.styles";

const MySortableContainer = SortableContainer(...);

export function ReorderThingsForm() {
  const classes = useStyles();
  return (
    <...>
      <MySortableContainer
        rows={rows}
        helperClass={classes.sorting}
        onSortEnd={onSortEnd}
      />
    </...>
  );
}

[lichenbuliren]

if you use it in a modal component，then the z-index will not be used;
the correct way is to use useRef and helperContainer

const modalBody = useRef<any>(null);
...
<Modal.Body ref={modalBody} className={styles.sortModalBody}>
  <SortableList
    items={sorts}
    helperContainer={modalBody.current}
    onSortEnd={sortEnd => handleSortEnd(sortEnd)}
  />
</Modal.Body>

[amanbabbar-kipl]

if you use it in a modal component，then the z-index will not be used;
the correct way is to use useRef and helperContainer

const modalBody = useRef<any>(null);
...
<Modal.Body ref={modalBody} className={styles.sortModalBody}>
  <SortableList
    items={sorts}
    helperContainer={modalBody.current}
    onSortEnd={sortEnd => handleSortEnd(sortEnd)}
  />
</Modal.Body>

on first sort element still invisible and when i sort second time then it is working fine. can you help me out asap.

[denyomonogatari]

https://github.com/clauderic/react-sortable-hoc/issues/87#issuecomment-556145361
If you are using another component besides modal from Material-UI you can get the z-index by looking at https://material-ui.com/customization/z-index/

[notsegfault]

If you want to control the zIndex more dynamically:

use updateBeforeSortStart event:

updateBeforeSortStart={(node) => { node.node.style.zIndex=9999; }}