Dragula Draggable - изменить положение сетки начальной загрузки при перетаскивании: 2 деления слева, 1 справа - PullRequest
Новая
       10

Dragula Draggable - изменить положение сетки начальной загрузки при перетаскивании: 2 деления слева, 1 справа

0 голосов
/ 11 мая 2018

Я использую dragula как плагин для перетаскивания элементов div в контейнер.

Если последовательность col-md-9, col-md-3, col-md-3, это будет выглядеть так, проблем не будет 

|-----------------|-------|
|                 |   2   |
|      1          |       |
|   (col-md-9)    |-------|
|                 |   3   |
|                 |       |
|-----------------|-------|

Но когда яперетащите элементы div, и в этом случае последовательность будет col-md-3, col-md-9, col-md-3. Я хочу, чтобы элементы div выглядели так: 

|-------|-----------------|
|   1   |                 |
|       |        2        |
|-------|    (col-md-9)   |
|   3   |                 |
|       |                 |
|-------|-----------------|

Не так: 

|-------|-----------------|
|   1   |                 |
|-------|        2        |
        |    (col-md-9)   |
        |                 |
        |                 |
        |-----------------|
|-------|
|   3   |
|-------|

Я не могу поместить элементы 1 и 3 в один столбец col-md-3, поскольку мне нужно, чтобы они перетаскивались по отдельности, поскольку каждый столбец col-md- * является перетаскиваемым элементом div. Вот фрагмент кода,Я могу использовать JQuery или CSS.Спасибо. 

<div class="row inview dragula clearfix">

   <div class="col-md-12 clearfix">


   <div class="col-md-3 clearfix">
      <div class="box " style = "height:243px;border:4px dashed rgba(25,25,25,.5)">
         <div class="box-body  draggable handle">
            Shortcut
         </div>
      </div>
   </div>

   <div class="col-md-3 clearfix">
      <div class="box"  style = "height:243px;border:4px dashed rgba(25,25,25,.5)">
        <div class="box-body draggable handle">
          Shortcut 2
        </div>
      </div>
   </div>

   <div class="col-md-9 ">
      <div class="box"  style = "height:500px;border:4px dashed rgba(25,25,25,.5)">
         <div class="box-body draggable handle">
             Calendar
         </div>
      </div>
   </div>



 </div>
...