Dragula row div dragging inside a column div is not working

Question

I created an HTML page to add row and column by 2 buttons click (Add row an Add Column). Also used a plugin called Dragula to drag and drop each of the added row and column, added rows can switch their positions and column inside the row can drag and drop to another row. I am having trouble dragging and dropping the complete column-filled row to a column inside another row. Looking for a solution.

Added row is appending to container div

Please find the below URL for ur reference. Thanks in advance.

Dragula Documentation: https://github.com/bevacqua/dragula

JSFiddle: https://jsfiddle.net/unni2003pj/7c5p0mwa/6/

reference: https://codepen.io/gabouh/pen/ZXrMzW (only column drag & drop and row switiching)

HTML:

<div class="wrapper">


      <div class="main-content">

        <div class="header">
          <button class="add-row" onclick="addRow()">Add Row +</button>
          <button class="add-column" onclick="addCol()">Add Column +</button>
        </div>

        <div class="content-box" >
          
            <div class="container" id="contentBox">
              
            </div>
        </div>

      </div>

    </div>

CSS:

* {
    box-sizing: border-box;
}

.wrapper {
    float: left;
    width: 100%;
    height: 100vh;
}

body {
    padding: 0;
    margin: 0;
    position: relative;
}
.main-content {
    float: left;
    width: calc(100%);
    height: 100%;
    background: #fafafa;
}
.header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
}
.content-box {
    width: 100%;
    height: calc(100% - 60px);
    padding: 15px;
}
button {
    background: #000;
    border: 0;
    padding: 0 20px;
    height: 40px;
    margin-left: 10px;
    font-weight: 600;
    color: white;
    cursor: pointer;
}
.container .ex-moved {
    background-color: #e74c3c;
}
.container.ex-over {
    background-color: rgba(255, 255, 255, 0.3);
}
.handle {
    background-color: rgba(0, 0, 0, 0.4);
    cursor: move;
    margin-right: 5px;
    padding: 0 5px;
}
.column-block h5 {
    margin: 0;
}
.gu-transit {
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    transition: .3s ease-out;
}

.container {
    width: 100%;
}
.bloc {
    width: 100%;
    border: 2px dashed #848484;
    background: #ffefef;
    margin-bottom: 20px;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
 .bloc--inner {
    margin: 0 10px;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    border: 2px dashed #848484;
    background-color: #d4ecff;
    padding: 20px;
}
.bloc--inner:first-child {
    margin-left: 0;
}
.bloc--inner:last-child {
    margin-right: 0;
}

JS:

// Initialize Dragula on the container
var dragulaContainer = [].slice.apply(document.querySelectorAll('.bloc'));
var drake;

function itemDrag() {
    drake = dragula([].slice.apply(document.querySelectorAll('.bloc')), {
        direction: 'horizontal'
    });
}

function destroyitemDrag() {
    drake.destroy();
}

function dragulaInt() {
    dragula([document.querySelector('.container')], {
        // moves: function(el, container, handle) {
        // return !handle.classList.contains('bloc--inner', 'bloc');
        // }
        isContainer: function (el) {
            return false; // only elements in drake.containers will be taken into account
          },
          moves: function (el, source, handle, sibling) {
            return true; // elements are always draggable by default
          },
          accepts: function (el, target, source, sibling) {
            return true; // elements can be dropped in any of the `containers` by default
          },
          invalid: function (el, handle) {
            return false; // don't prevent any drags from initiating by default
          },
          direction: 'vertical',             // Y axis is considered when determining where an element would be dropped
          copy: false,                       // elements are moved by default, not copied
          copySortSource: false,             // elements in copy-source containers can be reordered
          revertOnSpill: false,              // spilling will put the element back where it was dragged from, if this is true
          removeOnSpill: false,              // spilling will `.remove` the element, if this is true
          mirrorContainer: document.body,    // set the element that gets mirror elements appended
          ignoreInputTextSelection: true,     // allows users to select input text, see details below
          slideFactorX: 0,               // allows users to select the amount of movement on the X axis before it is considered a drag instead of a click
          slideFactorY: 0,               // allows users to select the amount of movement on the Y axis before it is considered a drag instead of a click
        
    }); 
}

(function() {
    
    dragulaInt()
    //itemDrag();
    
    
    
})();
  
// Add Column
  
var i=0;
var j=0;

let newColNode = null;

function addRow() {    
    const row = document.createElement('div');
    row.className = 'bloc';
    row.id = "b" + ++i;
    document.getElementById('contentBox').append(row);
    itemDrag()

    row.addEventListener('click', function (event) {
        console.log(newColNode)
        console.log(row)
        if(newColNode != null ){
           
            destroyitemDrag()
            itemDrag()

            
        }
        row.appendChild(newColNode);        
        newColNode = null
    });
}
  
// Column Addition

function addCol() {
    const col = document.createElement('div');
    col.className = 'bloc--inner';
    col.id = "c" + ++j;
    col.textContent = `Column ${j}`;
    newColNode = col;
}