react-sortablejs icon indicating copy to clipboard operation
react-sortablejs copied to clipboard

[bug] dragClass having no effect.

Open mhabsaoui opened this issue 8 months ago • 0 comments

Describe the bug Using the dragClass to apply a custom backgroud color on dragging list element, but has no effect.

To Reproduce Steps to reproduce the behavior:

  1. Use the react List component from MUI lib
  2. Add the ReactSortable component from react-sortablejs and map iterate with list items
  3. Add dragClass for custom color

Expected behavior The custom color should be applied as background color to the dragged element.

Information react-sortable = ^6.1.4 react = ^18.3.1

Additional context Some code

  return (
    <List
      component="nav"
      aria-labelledby="institutes"
      subheader={
        <ListSubheader component="h1" id="institutes">
         "selectSource"
        </ListSubheader>
      }>
      <ReactSortable list={sources} setList={setSources} dragClass="dragging">
        {sources.map(({ id, name }) => (
            <ListItemButton
              key={id}
              sx={{
                cursor: "grab",
              }}>
              <ListItemIcon>
                <DragIndicatorIcon />
              </ListItemIcon>
              <ListItemText primary={name} />
            </ListItemButton>
          )}
      </ReactSortable>
    </List>
  );
.dragging{
  background-color: #21ce21;
  color: #fff;
}

mhabsaoui avatar Apr 23 '25 15:04 mhabsaoui