Dragula：在同一行

Question

設置dragable圖像我試圖讓一組圖片dragable使用dragula 下面是代碼：

<div> 
    <label for="hy">There are plenty of events along the lifetime of a drag event. </label> 
     <div class="container" [dragula]="'second-bag'"> 
      <div class="row"> 
       <div class="col-lg-3"> 
        <div class="instrument"><img src="./images/gittare.png"/></div> 
       </div> 
       <div class="col-lg-3"> 
        <div class="instrument"><img src="./images/saxsophone.png"/></div> 
       </div> 
       <div class="col-lg-3"> 
        <div class="instrument"><img src="./images/drum.png"/></div> 
       </div> 
      </div> 
     </div> 
    <!--div class="wrapper"> 
    </div--> 
    ----------------- 
     <div class="container" [dragula]="'second-bag'" style="width:800px;"> 

       <div> Put it here to play</div> 

     </div> 

</div>  

我覺得<div [dragula]="'second-bag'">裏面一切都應該是dragable。不幸的是，整行是可拖動的，我不能獨立拖動圖像。

我需要row和col設置圖像在同一行。

Answer 1

[dragula]的子元素是拖動目標。

因此，將[dragula]屬性放在您的列上，然後每個圖像都可以拖動。

  <div class="col-lg-3" [dragula]="'second-bag'"> 
       <div class="instrument"><img src="./images/gittare.png"/></div> 
      </div> 
      <div class="col-lg-3" [dragula]="'second-bag'"> 
       <div class="instrument"><img src="./images/saxsophone.png"/></div> 
      </div> 
      <div class="col-lg-3" [dragula]="'second-bag'"> 
       <div class="instrument"><img src="./images/drum.png"/></div> 
      </div> 

如果你想限制每列一個圖像，那麼你就必須要一些邏輯添加到刪除和這樣的dragula事件。