X-Git-Url: https://git.jsancho.org/?p=vanzui.git;a=blobdiff_plain;f=src%2Fcomponents%2FVDraggable.vue;h=8a3f719c2b7d24bd574e8fa6ce356ede88b7997a;hp=132c2871c7a5899cf3dc26e67bed9502d6c26edf;hb=1feba8a66086a01bed23a2538c1a515200a487ca;hpb=274e2db97e41bb7aef36590cdf0c364aec8cc10a

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>