Dragula在多個div中的拖放

我在我的應用程序中使用Dragula實現了拖放'n'拖放，但我需要設置它以便可以將我的元素拖放到多個div上。Dragula在多個div中的拖放

我試圖用一個類來實現它，但它只是激活我的第一個div。

的HTML：

<div role="presentation" class="table table-striped"> 
     <div class="files" id="upload-file"></div> 
    </div> 
    <div class="col-md-4"> 
     <div class="drag-container">Test 1</div> 
     <div class="drag-container">Test 2</div> 
     <div class="drag-container">Test 3</div> 
    </div>

的JS調用Dragula：

dragula([document.querySelector('#upload-file'), document.querySelector('.drag-container')]);

我怎麼能放下TE項目不止一個DIV？

來源

2015-11-11 Salustiano Muniz

querySelector只返回一個元素，您需要使用querySelectorAll才能獲取元素列表。不知道dragula如何處理獲取兩個元素的數組，第二個元素是一個數組。您可能首先要生成數組，然後將'＃upload-file'添加到該數組，然後傳遞數組。或者你可以在初始化後生成數組，然後在數組中循環，使用類似「drake.containers.push（container）;」的方式動態添加元素。我直接從GitHub的網站得到這個結構https://github.com/bevacqua/dragula

來源

2015-11-23 10:45:08 richard

可以定義數組容器：

var containers = $('.drag-container').toArray(); 
containers.concat($('#upload-file').toArray());

，然後通過VAR '集裝箱' 到dragula初始化：

dragula(containers, { 
       isContainer: function (el) { 
        return el.classList.contains('drag-container'); 
       } 
      });

來源

2015-12-14 15:33:41 faster2b

真棒！多謝，夥計！ – spedley

-1

<div class="col-md-4" id="drag-section"> 
    <div class="drag-container">Test 1</div> 
    <div class="drag-container">Test 2</div> 
    <div class="drag-container">Test 3</div> 
</div>

dragula（[document.querySelector（'＃upload-file'），document.querySelector（'＃drag-section'）]）;

來源

2016-08-11 10:25:00

HTML：

<div className="wrapper"> 
    <div className="container col-md-4" id="A"> 
    <div className="panel panel-white"> 
    </div> 
    <div className="panel panel-white"> 
    </div> 
    </div> 
    <div className="container col-md-4" id="B"> 
    <div className="panel panel-white"> 
    </div> 
    <div className="panel panel-white"> 
    </div> 
    </div> 
</div>

JS：

dragula([document.querySelector('#A'), document.querySelector('#B')]);

你可以在一列中的每個項目拖放到另一個。您可以使用容器的類名添加更多列。如果要指定自定義類的名字，你應該定義選項是這樣的：

選項：

let options = { 
     isContainer: (el) => { 
      return el.classList.contains('drag-container'); // The immediate elements in this container will be draggable 
     }

來源

2016-10-15 11:52:58

Dragula在多個div中的拖放

回答

相關問題