How to use dragula - 10 common examples

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', {

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
// WORKAROUND: Angular Cli 6 has removed the globals patch, dragular requires this to we can patch it here
(/** @type {?} */ (window)).global = (/** @type {?} */ (window)).global || {};
import * as dragulaNamespace from 'dragula';
export var /** @type {?} */ dragula = (/** @type {?} */ (dragulaNamespace)).default || dragulaNamespace;

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ3VsYS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B1eC1hc3BlY3RzL3V4LWFzcGVjdHMvIiwic291cmNlcyI6WyJkaXJlY3RpdmVzL3Jlb3JkZXJhYmxlL2RyYWd1bGEudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFDQSxtQkFBTSxNQUFNLEVBQUMsQ0FBQyxNQUFNLEdBQUcsbUJBQU0sTUFBTSxFQUFDLENBQUMsTUFBTSxJQUFJLEVBQUUsQ0FBQztBQUdsRCxPQUFPLEtBQUssZ0JBQWdCLE1BQU0sU0FBUyxDQUFDO0FBRzVDLE1BQU0sQ0FBQyxxQkFBTSxPQUFPLEdBQStDLG1CQUFDLGdCQUF1QixFQUFDLENBQUMsT0FBTyxJQUFJLGdCQUFnQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLy8gV09SS0FST1VORDogQW5ndWxhciBDbGkgNiBoYXMgcmVtb3ZlZCB0aGUgZ2xvYmFscyBwYXRjaCwgZHJhZ3VsYXIgcmVxdWlyZXMgdGhpcyB0byB3ZSBjYW4gcGF0Y2ggaXQgaGVyZVxuKDxhbnk+d2luZG93KS5nbG9iYWwgPSAoPGFueT53aW5kb3cpLmdsb2JhbCB8fCB7fTtcblxuLy8gV09SS0FST1VORDogbmctcGFja2FnciBpc3N1ZSAtIGh0dHBzOi8vZ2l0aHViLmNvbS9kaGVyZ2VzL25nLXBhY2thZ3IvaXNzdWVzLzE2M1xuaW1wb3J0ICogYXMgZHJhZ3VsYU5hbWVzcGFjZSBmcm9tICdkcmFndWxhJztcbmltcG9ydCB7IERyYWtlIH0gZnJvbSAnZHJhZ3VsYSc7XG5cbmV4cG9ydCBjb25zdCBkcmFndWxhOiAoY29udGFpbmVycz86IGFueSwgb3B0aW9ucz86IGFueSkgPT4gRHJha2UgPSAoZHJhZ3VsYU5hbWVzcGFjZSBhcyBhbnkpLmRlZmF1bHQgfHwgZHJhZ3VsYU5hbWVzcGFjZTsiXX0=

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
// WORKAROUND: Angular Cli 6 has removed the globals patch, dragular requires this to we can patch it here
(/** @type {?} */ (window)).global = (/** @type {?} */ (window)).global || {};
import * as dragulaNamespace from 'dragula';
export const /** @type {?} */ dragula = (/** @type {?} */ (dragulaNamespace)).default || dragulaNamespace;

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ3VsYS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B1eC1hc3BlY3RzL3V4LWFzcGVjdHMvIiwic291cmNlcyI6WyJkaXJlY3RpdmVzL3Jlb3JkZXJhYmxlL2RyYWd1bGEudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFDQSxtQkFBTSxNQUFNLEVBQUMsQ0FBQyxNQUFNLEdBQUcsbUJBQU0sTUFBTSxFQUFDLENBQUMsTUFBTSxJQUFJLEVBQUUsQ0FBQztBQUdsRCxPQUFPLEtBQUssZ0JBQWdCLE1BQU0sU0FBUyxDQUFDO0FBRzVDLE1BQU0sQ0FBQyx1QkFBTSxPQUFPLEdBQStDLG1CQUFDLGdCQUF1QixFQUFDLENBQUMsT0FBTyxJQUFJLGdCQUFnQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLy8gV09SS0FST1VORDogQW5ndWxhciBDbGkgNiBoYXMgcmVtb3ZlZCB0aGUgZ2xvYmFscyBwYXRjaCwgZHJhZ3VsYXIgcmVxdWlyZXMgdGhpcyB0byB3ZSBjYW4gcGF0Y2ggaXQgaGVyZVxuKDxhbnk+d2luZG93KS5nbG9iYWwgPSAoPGFueT53aW5kb3cpLmdsb2JhbCB8fCB7fTtcblxuLy8gV09SS0FST1VORDogbmctcGFja2FnciBpc3N1ZSAtIGh0dHBzOi8vZ2l0aHViLmNvbS9kaGVyZ2VzL25nLXBhY2thZ3IvaXNzdWVzLzE2M1xuaW1wb3J0ICogYXMgZHJhZ3VsYU5hbWVzcGFjZSBmcm9tICdkcmFndWxhJztcbmltcG9ydCB7IERyYWtlIH0gZnJvbSAnZHJhZ3VsYSc7XG5cbmV4cG9ydCBjb25zdCBkcmFndWxhOiAoY29udGFpbmVycz86IGFueSwgb3B0aW9ucz86IGFueSkgPT4gRHJha2UgPSAoZHJhZ3VsYU5hbWVzcGFjZSBhcyBhbnkpLmRlZmF1bHQgfHwgZHJhZ3VsYU5hbWVzcGFjZTsiXX0=

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>