Блог

ИЗМЕНИТЬ: Вот изображение моего кода в действии:

ПРАВКА 2: Мне любопытно, не коробка ли flex нарушает этот код? Предназначена ли 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 элементов внутри этого контейнера с помощью 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;
 

И я использую следующий код драгулы:

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