How to use the dragula function in dragula

componentDidMount() {
    // 接收子级里传来的 dom 数据;
    // window.addEventListener('message', this.receiveDomData);
    window.receiveDomData = this.receiveDomData;
    // 重置框
    window.addEventListener('resize', () => {
      this.reRect();
    });
    // 拖动
    let newId;
    this.side = document.querySelector('.edit-side-drawer .drawer-content .img-content-wrapper');
    this.stage = document.querySelector('.edit-stage .overlay');

    let stateChild;
    const t = dragula([this.side, this.stage], {
      copy: (el, source) => source === this.side,
      moves: (el, container, handle) => (
        handle.classList.contains('drag-hints') || handle.classList.contains('img')
        || handle.tagName.toLocaleLowerCase() === 'img'
      ),
      accepts: (el, source) => {
        if (source === this.stage) {
          const elKey = el.getAttribute('data-key');
          const data = this.state.data;
          const dArr = Object.keys(data).filter((key) => key.split('_')[0] === elKey)
            .map((key) => parseFloat(key.split('_')[1])).sort((a, b) => a - b);
          newId = `${elKey}_${(dArr[dArr.length - 1] + 1) || 0}`;
          const sourceArray = Array.prototype.slice.call(source.children);
          stateChild = stateChild || sourceArray;
          const placeholder = source.querySelectorAll('.placeholder')[0];
          const ci = sourceArray.indexOf(placeholder);

const bagName = vnode
        ? vnode.data.attrs.bag // Vue 2
        : this.params.bag // Vue 1
      if (!vnode) {
        container = this.el // Vue 1
      }
      if (bagName !== undefined && bagName.length !== 0) {
        name = bagName
      }
      const bag = service.find(name)
      if (bag) {
        drake = bag.drake
        drake.containers.push(container)
        return
      }
      drake = dragula({
        containers: [container]
      })
      service.add(name, drake)

      service.handleModels(name, drake)
    },

this.$nextTick(() => {
      const tabs = this.$refs.tabContainer

      // Allow to scroll through the tabs by mouse wheel or touchpad.
      tabs.addEventListener('wheel', this.handleTabScroll)

      // Allow tab drag and drop to reorder tabs.
      const drake = this.drake = dragula([this.$refs.tabDropContainer], {
        direction: 'horizontal',
        revertOnSpill: true,
        mirrorContainer: this.$refs.tabDropContainer,
        ignoreInputTextSelection: false
      }).on('drop', (el, target, source, sibling) => {
        // Current tab that was dropped and need to be reordered.
        const droppedId = el.getAttribute('data-id')
        // This should be the next tab (tab | ... | el | sibling | tab | ...) but may be
        // the mirror image or null (tab | ... | el | sibling or null) if last tab.
        const nextTabId = sibling && sibling.getAttribute('data-id')
        const isLastTab = !sibling || sibling.classList.contains('gu-mirror')
        if (!droppedId || (sibling && !nextTabId)) {
          throw new Error('Cannot reorder tabs: invalid tab id.')
        }

        this.$store.dispatch('EXCHANGE_TABS_BY_ID', {

this.containerId = this.guid()
    this.class = this.guid()
    this.nbTabs = 0

    var html = `
      <div class="c${this.class} tabs" id="${this.containerId}">
        <ul class="headers" id="${this.tabsHeaderId}">
        </ul>
      </div>
    `

    $(container).append(html)

    if (opts.allowDrag) {

      this.drake = dragula(
        [$(`#${this.tabsHeaderId}`)[0]],
        {removeOnSpill: false})

      var drakeEvents = [
        'drag', 'dragend', 'drop', 'cancel', 'remove'
      ]

      drakeEvents.forEach((event) =&gt; {

        this.drake.on(event, () =&gt; {

          this.emit('drake.' + event, arguments)
        })
      })
    }
  }

configDragula () {
				const self = this
				/*
					Disable swipe-history-navigation
					https://superuser.com/questions/840102/how-do-you-disable-swipe-history-navigation
					Go to chrome://flags/#overscroll-history-navigation
					Disable the Overscroll history navigation experiment:
				*/
				var drake = dragula({
					isContainer: function (el) {
						return el.classList.contains('todo') ||
							el.classList.contains('doing') ||
							el.classList.contains('blocked') ||
							el.classList.contains('done')
					},
					moves: function (el, target, source, sibling) {
						var owner = $(target).attr('owner')
						var status = $(target).attr('class').split(' ').reverse()[0]

						var sourceOwner = $(source).attr('owner')
						var sourceStatus = $(source).attr('class').split(' ').reverse()[0]

						if (owner !== sourceOwner || status !== sourceStatus) {
							return true
						} else {

initStore.componentMeta[component["name"]] = component;
        });
        this.store.setStore(configureStore(initStore));
        this.store.mapStateToProps(this, (state) => {
            return {
                pageNodes: state.pageNodes
            };
        });
        this.store.mapDispatchToProps(this, {
            setDrake: action.setDrake,
            addReloadNodeIds: action.addReloadNodeIds,
            updatePageNodes: action.updatePageNodes,
            removeNode: action.removeNode
        });
        let scope = this;
        let drake = dragula({
            revertOnSpill: false,
            direction: 'vertical',
        });
        drake.on('drop', function (el, target, source) {
            let newIndex = 0;
            _.forEach(el.parentElement.childNodes, function (node) {
                if (node === el) {
                    return false;
                }
                newIndex++;
            });
            var moveInfo = {
                originContainerId: source.getAttribute("data-container-id"),
                originParentNodeId: source.getAttribute("data-parent-id"),
                newContainerId: target.getAttribute("data-container-id"),
                newParentNodeId: target.getAttribute("data-parent-id"),

setup() {
    return Dragula([], {
      direction: 'horizontal',
      moves: (_el, _container, handle) => handle.classList.contains(this.dndHandlerCssClass),
    });
  }

render() {
    var d = dragula({
      moves: function(el, cont, handle) {
        return handle.className !== 'title';
      }
    });
    var cs = document.querySelectorAll('.listI');
    for (var i in cs) {
      d.containers.push(cs[i]);
    }
    let items = this.state.items;
    return (
      <div>
        <ul>
          {items.map(item =&gt; (
            </ul></div>

initDragDrop() {
        let self = this;

        this.drake = dragula([this.blocksTarget], {
            moves: function (el, container, handle) {
                let isCorrectHandle = (handle.dataset.parentContainerKey === self.blocksTarget.dataset.containerKey);

                return handle.classList.contains('card-handle') && isCorrectHandle;
            }
        }).on('drop', () => {
            this.sort();
        });

        return this;
    }

componentDidRender() {
    const drake = dragula([this.acListAvalibles.querySelector('.ac-list'), this.acListSelectedOptions.querySelector('.ac-list')], {
      invalid: (el: HTMLElement) => {
        return el.classList.contains('ac-list__list-separator');
      }
    });
    drake
    .on('drop', (el, target, source) => {
        drake.cancel(true);
        if (!source.parentElement || !target.parentElement) {
          return;
        }
        const acListSource = source.parentElement.parentElement;
        const acListTarget = target.parentElement.parentElement;
        if (acListTarget === acListSource) {
          return;
        }
        const option = acListSource.options.find(x => x.value.toString() === el.value.toString());