Resolve "Implement basic functionality"

Closes #1 (closed) Closes #2 (closed) Closes #3 (closed) Closes #4 (closed) Closes #5 (closed) Closes #6 (closed)

src/DragContainer.vue

+<template>
+  <interact
+    @dragstart="handleDragStart"
+    @dragmove="handleDragMove"
+    :draggable="!isDisabled"
+    id="wrapper"
+    ref="wrapper"
+    @dragend="handleDragEnd"
+    :data-transfer="dataTransferString"
+  >
+    <slot></slot>
+  </interact>
+</template>
+
+<script>
+export default {
+  name: "DragContainer",
+  methods: {
+    handleDragStart(event) {
+      if (this.isDisabled) return;
+      let rect = event.target.getBoundingClientRect();
+      this.dataTransfer = {
+        key: this.dragID,
+        x: this.x,
+        y: this.y,
+        w: this.w,
+        h: this.h,
+        data: this.data,
+        context: this.context,
+        originGridId: this.gridId,
+        mouseX: event.clientX - rect.x - rect.width / (2 * this.w), // relative to center of the top left square
+        mouseY: event.clientY - rect.y - rect.height / (2 * this.h),
+      };
+    },
+    handleDragEnd() {
+      this.offsetX = 0;
+      this.offsetY = 0;
+    },
+    handleDragMove(event) {
+      this.offsetX += event.dx;
+      this.offsetY += event.dy;
+    },
+  },
+  props: {
+    dragID: {
+      type: String,
+      required: true,
+    },
+    x: {
+      type: Number,
+      required: true,
+    },
+    y: {
+      type: Number,
+      required: true,
+    },
+    w: {
+      type: Number,
+      required: true,
+    },
+    h: {
+      type: Number,
+      required: true,
+    },
+    data: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    context: {
+      type: String,
+      required: true,
+    },
+    gridId: {
+      type: String,
+      required: true,
+    },
+    disabled: Boolean,
+  },
+  computed: {
+    isInGrid() {
+      return this.x >= 0 && this.y >= 0;
+    },
+    isNotInGrid() {
+      return this.x === -1 || this.y === -1;
+    },
+    getX() {
+      return this.x === 0 ? "auto" : this.x;
+    },
+    getY() {
+      return this.y === 0 ? "auto" : this.y;
+    },
+    getDisplay() {
+      return this.isInGrid ? "block" : "none";
+    },
+    isDisabled() {
+      return this.disabled || this.isNotInGrid;
+    },
+    cursor() {
+      return this.disabled ? "auto" : "grab";
+    },
+    dataTransferString() {
+      return JSON.stringify(this.dataTransfer);
+    },
+  },
+  data() {
+    return {
+      dataTransfer: {},
+      offsetX: 0,
+      offsetY: 0,
+    };
+  },
+};
+</script>
+
+<style scoped>
+#wrapper {
+  grid-column: v-bind(getX) / span v-bind(w);
+  grid-row: v-bind(getY) / span v-bind(h);
+  display: v-bind(getDisplay);
+  cursor: v-bind(cursor);
+  transform: translate(
+    calc(1px * v-bind(offsetX)),
+    calc(1px * v-bind(offsetY))
+  );
+}
+</style>