react-dragula 只能在高速下工作？

Question

编辑：这是我的代码正在运行的图像：

编辑2：我很好奇是否是弹性框破坏了这段代码？ Dragula 是否设计用于与弹性容器一起使用？

我有以下容器：

#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%;

我正在使用 React 在该容器中添加 3 行，每行 7 个项目：

#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;

我正在使用以下拖拉古拉代码：

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

并像这样声明我的显示框：

  <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)}     

这段代码大部分情况下都有效。我可以拖动我的卡片，它们会按预期推动其他卡片。但只有当我在屏幕上快速拖动项目时它才有效。这让我永远无法准确地放置它们，这实际上和不工作一样好。如果我慢慢地将一个项目拖到其他项目上，绝对不会发生任何事情。有没有人有这个包的经验来阐明一些？

编辑3：我忘记了我有从网站复制的CSS。我不完全理解，但这可能是问题所在？

   .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);
  }

Answer 1

我通过在严格模式之外运行 React 成功解决了这个问题。在index.js中你可能有

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

尝试更改为

root.render(
  <App />
);