react-dragula only working at high speed?

Question

EDIT: Here's an image of my code in action:

EDIT 2: I'm curious if it's the flex box that's breaking this code? Is dragula designed to work with flex containers?

I have the following container:

#myDisplay{
        display: flex;
        justify-content:left;        
        overflow:none;
        flex-wrap: wrap;
        flex-grow: 0;
        position:absolute;
        top: 2.68518519%;
        left:9.96767241%;
        width: 90.03232759%;
        height:97.31481481%;

and I'm adding 3 rows of 7 items inside this container with react:

#myCard{
        
        color:var(--txtcolor);        
        flex-shrink: 0;
        width:12.44763614549592%;
        height: 31.29381571%;
        background: var(--contentbg);
        border: 3px solid var(--drkblue);
        box-sizing: border-box;
        border-radius: 53px;
        margin-right: 1.7658573%;
        padding-left: 1%;
        padding-right:1%;
        font-size: 0.875rem;

And I'm using the following dragula code:

  const dragulaDecorator = (componentBackingInstance) => {
    if (componentBackingInstance) {
      let options = { };
      Dragula([componentBackingInstance], options);
    }
  };

and declaring my display box like this:

  <div id="myDisplay" ref={dragulaDecorator}>
  {renderCard(1)}
  {renderCard(2)}
  {renderCard(3)}
  {renderCard(4)}
  {renderCard(5)}
  {renderCard(6)}
  {renderCard(7)}    
  {renderCard(8)}  
  {renderCard(9)}
  {renderCard(10)}
  {renderCard(11)}
  {renderCard(12)}
  {renderCard(13)}
  {renderCard(14)} 
  {renderCard(15)}
  {renderCard(16)}
  {renderCard(17)}
  {renderCard(18)}
  {renderCard(19)}
  {renderCard(20)}
  {renderCard(21)}     

This code works... mostly. I can drag around my cards and they will nudge the others around as intended. But it only works when I drag my items around very fast around the screen. Which allows me to never accurately place them and it's really just as good as not working. If I drag an item slowly over others, absolutely nothing happens. Does anyone have experience with this package to shed some light?

EDIT 3: I forgot I have this CSS which I copied from the website. I don't fully understand it but this may be the problem?

   .gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
  }
  .gu-hide {
    display: none !important;
  }
  .gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }
  .gu-transit {
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
  }

Document

could you provide a minimal reproducible example? I tried here but it doesn't show the faulty behavior – Petey

@Petey I have added some CSS which I forgot to mention as part of it. This may allow you to reproduce my issue – Document

I updated my codesandbox with new CSS and still works, could you share the renderCard method code? – Petey

Answer 1

I managed to resolve this issue by running React outside of Strict Mode. In index.js you probably have

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Try changing to just

root.render(
  <App />
);

Clancy