let count      = 2; toMoveID = 0, newIndex = 0;;
let insert     = "";
let isDragging = false;

var drake = dragula({
        direction: 'horizontal',        // X 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: true,            // 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
        ignoreInputTextSelection: true  // allows users to select input text, see details below
    }).on('drag', function (el) {
        isDragging   = true;
        toMoveID     = parseInt(el.getAttribute("tabID"));
        el.className = el.className.replace('ex-moved', '');
    }).on('drop', function (el, container) {
        var subCont = document.getElementById("listZone");
        var size = subCont.children.length;

        for (var i = 0; i < size; i++) {
            if (subCont.children[i].getAttribute("tabID") == toMoveID) {
                newIndex = i;
            }
        }

        isDragging   = false;
        tabsAction.move(toMoveID, {index: newIndex}).then();
        el.className += ' ex-moved';
    }).on('over', function (el, container) {
        container.className += ' ex-over';
    }).on('out', function (el, container) {
        container.className = container.className.replace('ex-over', '');
});


drake.on("cancel", (el, container, source) => {
    isDragging   = false;
    el.scrollIntoView();

    let i = 0;
    while( (el = el.previousSibling) != null ) {
        i++;
    }

    if (i < (container.children.length - 6)) {
        container.scrollBy(0, -100); // Go up 100px
    }
});

// Connect to pre created containers
drake.containers.push(document.querySelector('#listZone'));