Dragula drop в нескольких divs

Question

Я применил drag 'n' drop в своем приложении, используя Dragula, но мне нужно установить его, чтобы я мог отбросить элементы до более чем одного div.

Я попытался использовать класс для его достижения, но он просто активирует первый из моих div.

THe 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')]); 

Как я могу упасть të элементы более чем одного DIV?

Answer 1

querySelector возвращает только один элемент, вам нужно будет использовать querySelectorAll, чтобы получить список элементов. Не уверен, как dragula будет обрабатывать получение двухэлементного массива, причем вторым элементом будет массив. Вы можете сначала сгенерировать массив, добавить '# upload-file' в этот массив, а затем передать массив. Или вы можете сгенерировать массив после инициализации и цикл через массив, добавив элементы динамически, используя что-то вроде «drake.containers.push (container);». Я получил эту конструкцию прямо с сайта GitHub https://github.com/bevacqua/dragula

Answer 2

Вы можете определить массив контейнеров:

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

А потом, проходят Var 'контейнеры' для Dragula инициализаторе:

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

Answer 3

<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')]);

Answer 4

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 
     }