Making a custom reorderable list component

App Building
21

I know this is a few years old... but for anyone that may see it or may have checked it before, I implemented this as it is above and it rendered fine.

However, after dragging an item, as soon as I drop it the text disappears.

Seems like for whatever reason it's not maintaining that white color or reverting back to it.

I can add colors for the isDragging to get a different color while dragging... but still disappears after dropped.

22

Nevermind... Claude figured it out when ChatGPT failed...

const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => 
{
  // ... (previous code remains unchanged)

  const getItemStyle = (draggableStyle, isDragging) => { 
    const returnStyle = {
      // some basic styles to make the items look a bit nicer
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      userSelect: 'none',
      padding: gGrid * 2,
      margin: `0 0 ${gGrid}px 0`,
      fontFamily: "sans-serif",
      fontSize: "small",

      // change background colour if dragging
      background: isDragging ? '#E9E9E9' : '#D75686',
      color: isDragging ? '#000000' : '#FFFFFF', // Changed this line
    };
    return Object.assign(returnStyle, draggableStyle);
  }
1 Like
23

+1