var count  = 2; toMoveID = 0, newIndex = 0;;
var insert = "";

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) {
        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;
            }
        }

        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', '');
});

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