From: Javier Sancho <jsf@jsancho.org>
Date: Sun, 28 Mar 2021 18:55:22 +0000 (+0200)
Subject: Draggable components
X-Git-Url: https://git.jsancho.org/?p=vanzui.git;a=commitdiff_plain;h=1feba8a66086a01bed23a2538c1a515200a487ca;hp=274e2db97e41bb7aef36590cdf0c364aec8cc10a

Draggable components
---

diff --git a/src/components/VDraggable.vue b/src/components/VDraggable.vue
index 132c287..8a3f719 100644
--- a/src/components/VDraggable.vue
+++ b/src/components/VDraggable.vue
@@ -1,11 +1,45 @@
 <template>
-  <div>
-    <slot></slot>
+  <div draggable @dragstart="startDrag" @dragend="endDrag">
+    <div v-if="!dragging" style="pointer-events: none">
+      <slot></slot>
+    </div>
+    <div v-else class="dragging-box p-3">
+      Place the component here
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: "VDraggable",
+  data() {
+    return {
+      dragging: false,
+    };
+  },
+  methods: {
+    startDrag(evt) {
+      evt.dataTransfer.dropEffect = "move";
+      evt.dataTransfer.effectAllowed = "move";
+      evt.dataTransfer.setData("component", this);
+
+      // Drag image
+      var img = document.createElement("img");
+      img.src = "../assets/logo.png";
+      evt.dataTransfer.setDragImage(img, 0, 0);
+
+      this.dragging = true;
+    },
+    endDrag() {
+      this.dragging = false;
+    },
+  },
 };
 </script>
+
+<style lang="scss" scoped>
+.dragging-box {
+  border: 2px dashed;
+  opacity: 0.6;
+}
+</style>