Clone Vuedraggable not working with Laravel

[rossi99]

Hi,

I have a web application where I have a panel of elements that can be dragged on to a canvas.

<< Step by step scenario >>

The user loads up the card builder and can drag elements from one panel to the next

Here is the elements panel, this is where the draggle items start:

<!-- Logo -->
<div class="item-row">
    <div class="item-info">
        <div class="label">
            <p>Logo</p>
        </div>

        <div class="element-container">
            <!-- Draggable Item -->
            <draggable class="element-holder" :list="arrayElements" group="elements">
                <img src="/images/card-builder/logo.png" class="logo" alt="Draggable logo">
            </draggable>
        </div>

        <div class="clearFix"></div>
    </div>
</div>

Here is the canvas where the elements from the first panel, it is made up of 15 ( 3 rows of 5 ) separate buckets and they are defined like:

<!-- Level 1 buckets -->
<draggable class="lvl1-1 bucket empty" :list="arrA" group="buckets"></draggable>
<draggable class="lvl1-2 bucket empty" :list="arrB" group="buckets"></draggable>
...
<draggable class="lvl3-4 bucket empty" :list="arrN" group="buckets"></draggable>
<draggable class="lvl3-5 bucket empty" :list="arrO" group="buckets"></draggable>

And finally here is the script section:

import draggable from "vuedraggable";

export default {
    name: "clone",
    display: "Clone",
    order: 2,
    components: {
        draggable
    },

    data() {
        return {
            arrayElements: [
                {name: "Logo"},
                {name: "stamp"},
            ],
            arrA: [],
            arrB: [],
            arrC: [],
            arrD: [],
            arrE: [],
            arrF: [],
            arrG: [],
            arrH: [],
            arrI: [],
            arrJ: [],
            arrK: [],
            arrL: [],
            arrM: [],
            arrN: [],
            arrO: [],
        };
    }
};

I am installing with npm

<< Actual Solution >>

I am getting the following error in the console, but the build is successful:

Uncaught TypeError: Object(...) is not a function
    at Module.fb15 (app.js:76614)
    at __nested_webpack_require_770__ (app.js:71891)
    at app.js:71955
    at app.js:71958
    at webpackUniversalModuleDefinition (app.js:71869)
    at Object../node_modules/vuedraggable/dist/vuedraggable.umd.js (app.js:71871)
    at __webpack_require__ (app.js:77070)
    at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/loyaltycard/card-builder.vue?vue&type=script&lang=js& (app.js:15096)
    at __webpack_require__ (app.js:77070)
    at Module../resources/js/components/loyaltycard/card-builder.vue?vue&type=script&lang=js& (app.js:55712)

And here is the error line:

var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
  name: "draggable",
  inheritAttrs: false,
  props: props,
  emits: emits,
  data: function data() {
    return {
      error: false
    };
  },
  render: function render() {
    try {
      this.error = false;
      var $slots = this.$slots,
          $attrs = this.$attrs,
          tag = this.tag,
          componentData = this.componentData,
          realList = this.realList,
          getKey = this.getKey;
      var componentStructure = computeComponentStructure({
        $slots: $slots,
        tag: tag,
        realList: realList,
        getKey: getKey
      });
      this.componentStructure = componentStructure;
      var attributes = getComponentAttributes({
        $attrs: $attrs,
        componentData: componentData
      });
      return componentStructure.render(external_commonjs_vue_commonjs2_vue_root_Vue_["h"], attributes);
    } catch (err) {
      this.error = true;
      return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["h"])("pre", {
        style: {
          color: "red"
        }
      }, err.stack);
    }
  },
  created: function created() {
    if (this.list !== null && this.modelValue !== null) {
      console["a" /* console */].error("modelValue and list props are mutually exclusive! Please set one or another.");
    }
  },
  mounted: function mounted() {
    var _this4 = this;

    if (this.error) {
      return;
    }

    var $attrs = this.$attrs,
        $el = this.$el,
        componentStructure = this.componentStructure;
    componentStructure.updated();
    var sortableOptions = createSortableOption({
      $attrs: $attrs,
      callBackBuilder: {
        manageAndEmit: function manageAndEmit(event) {
          return _manageAndEmit.call(_this4, event);
        },
        emit: function emit(event) {
          return _emit.bind(_this4, event);
        },
        manage: function manage(event) {
          return _manage.call(_this4, event);
        }
      }
    });
    var targetDomElement = $el.nodeType === 1 ? $el : $el.parentElement;
    this._sortable = new external_commonjs_sortablejs_commonjs2_sortablejs_amd_sortablejs_root_Sortable_default.a(targetDomElement, sortableOptions);
    this.targetDomElement = targetDomElement;
    targetDomElement.__draggable_component__ = this;
  },
  updated: function updated() {
    this.componentStructure.updated();
  },
  beforeUnmount: function beforeUnmount() {
    if (this._sortable !== undefined) this._sortable.destroy();
  },
  computed: {
    realList: function realList() {
      var list = this.list;
      return list ? list : this.modelValue;
    },
    getKey: function getKey() {
      var itemKey = this.itemKey;

      if (typeof itemKey === "function") {
        return itemKey;
      }

      return function (element) {
        return element[itemKey];
      };
    }
  },
  watch: {
    $attrs: {
      handler: function handler(newOptionValue) {
        var _sortable = this._sortable;
        if (!_sortable) return;
        getValidSortableEntries(newOptionValue).forEach(function (_ref) {
          var _ref2 = _slicedToArray(_ref, 2),
              key = _ref2[0],
              value = _ref2[1];

          _sortable.option(key, value);
        });
      },
      deep: true
    }
  },
  methods: {
    getUnderlyingVm: function getUnderlyingVm(domElement) {
      return this.componentStructure.getUnderlyingVm(domElement) || null;
    },
    getUnderlyingPotencialDraggableComponent: function getUnderlyingPotencialDraggableComponent(htmElement) {
      //TODO check case where you need to see component children
      return htmElement.__draggable_component__;
    },
    emitChanges: function emitChanges(evt) {
      var _this5 = this;

      Object(external_commonjs_vue_commonjs2_vue_root_Vue_["nextTick"])(function () {
        return _this5.$emit("change", evt);
      });
    },
    alterList: function alterList(onList) {
      if (this.list) {
        onList(this.list);
        return;
      }

      var newList = _toConsumableArray(this.modelValue);

      onList(newList);
      this.$emit("update:modelValue", newList);
    },
    spliceList: function spliceList() {
      var _arguments = arguments;

      var spliceList = function spliceList(list) {
        return list.splice.apply(list, _toConsumableArray(_arguments));
      };

      this.alterList(spliceList);
    },
    updatePosition: function updatePosition(oldIndex, newIndex) {
      var updatePosition = function updatePosition(list) {
        return list.splice(newIndex, 0, list.splice(oldIndex, 1)[0]);
      };

      this.alterList(updatePosition);
    },
    getRelatedContextFromMoveEvent: function getRelatedContextFromMoveEvent(_ref3) {
      var to = _ref3.to,
          related = _ref3.related;
      var component = this.getUnderlyingPotencialDraggableComponent(to);

      if (!component) {
        return {
          component: component
        };
      }

      var list = component.realList;
      var context = {
        list: list,
        component: component
      };

      if (to !== related && list) {
        var destination = component.getUnderlyingVm(related) || {};
        return _objectSpread2(_objectSpread2({}, destination), context);
      }

      return context;
    },
    getVmIndexFromDomIndex: function getVmIndexFromDomIndex(domIndex) {
      return this.componentStructure.getVmIndexFromDomIndex(domIndex, this.targetDomElement);
    },
    onDragStart: function onDragStart(evt) {
      this.context = this.getUnderlyingVm(evt.item);
      evt.item._underlying_vm_ = this.clone(this.context.element);
      draggingElement = evt.item;
    },
    onDragAdd: function onDragAdd(evt) {
      var element = evt.item._underlying_vm_;

      if (element === undefined) {
        return;
      }

      removeNode(evt.item);
      var newIndex = this.getVmIndexFromDomIndex(evt.newIndex);
      this.spliceList(newIndex, 0, element);
      var added = {
        element: element,
        newIndex: newIndex
      };
      this.emitChanges({
        added: added
      });
    },
    onDragRemove: function onDragRemove(evt) {
      insertNodeAt(this.$el, evt.item, evt.oldIndex);

      if (evt.pullMode === "clone") {
        removeNode(evt.clone);
        return;
      }

      var _this$context = this.context,
          oldIndex = _this$context.index,
          element = _this$context.element;
      this.spliceList(oldIndex, 1);
      var removed = {
        element: element,
        oldIndex: oldIndex
      };
      this.emitChanges({
        removed: removed
      });
    },
    onDragUpdate: function onDragUpdate(evt) {
      removeNode(evt.item);
      insertNodeAt(evt.from, evt.item, evt.oldIndex);
      var oldIndex = this.context.index;
      var newIndex = this.getVmIndexFromDomIndex(evt.newIndex);
      this.updatePosition(oldIndex, newIndex);
      var moved = {
        element: this.context.element,
        oldIndex: oldIndex,
        newIndex: newIndex
      };
      this.emitChanges({
        moved: moved
      });
    },
    computeFutureIndex: function computeFutureIndex(relatedContext, evt) {
      if (!relatedContext.element) {
        return 0;
      }

      var domChildren = _toConsumableArray(evt.to.children).filter(function (el) {
        return el.style["display"] !== "none";
      });

      var currentDomIndex = domChildren.indexOf(evt.related);
      var currentIndex = relatedContext.component.getVmIndexFromDomIndex(currentDomIndex);
      var draggedInList = domChildren.indexOf(draggingElement) !== -1;
      return draggedInList || !evt.willInsertAfter ? currentIndex : currentIndex + 1;
    },
    onDragMove: function onDragMove(evt, originalEvent) {
      var move = this.move,
          realList = this.realList;

      if (!move || !realList) {
        return true;
      }

      var relatedContext = this.getRelatedContextFromMoveEvent(evt);
      var futureIndex = this.computeFutureIndex(relatedContext, evt);

      var draggedContext = _objectSpread2(_objectSpread2({}, this.context), {}, {
        futureIndex: futureIndex
      });

      var sendEvent = _objectSpread2(_objectSpread2({}, evt), {}, {
        relatedContext: relatedContext,
        draggedContext: draggedContext
      });

      return move(sendEvent, originalEvent);
    },
    onDragEnd: function onDragEnd() {
      draggingElement = null;
    }
  }
});

[djaiss]

This has nothing to do with Laravel.