4

编辑：这是我的代码在运行中的图像：在此处输入图像描述

编辑 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%;

我在这个容器中添加了 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;

我正在使用以下 Dragula 代码：

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

0 回答 0