From 48abe2b1c982525dae576f72562396e7ff41977d Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 6 Feb 2023 13:39:17 +0100
Subject: [PATCH] Make objects draggable
---
src/DragContainer.vue | 16 +++++++++++++++-
src/Grid.vue | 10 ++++++++--
2 files changed, 23 insertions(+), 3 deletions(-)
diff --git a/src/DragContainer.vue b/src/DragContainer.vue
index 2f27374..14ca96c 100644
--- a/src/DragContainer.vue
+++ b/src/DragContainer.vue
@@ -3,6 +3,8 @@
<slot>
<div id="container">
<dl>
+ <dt>Key</dt>
+ <dd>{{ dragID }}</dd>
<dt>Position</dt>
<dd>{{ x }}, {{ y }}</dd>
<dt>Size</dt>
@@ -18,10 +20,22 @@ export default {
name: "DragContainer",
methods: {
handleDragStart(event) {
- event.dataTransfer.setData("text", event.target.id);
+ event.dataTransfer.setData(
+ "vueDrag/gridItem",
+ JSON.stringify(
+ {
+ key: this.dragID,
+ x: this.x,
+ y: this.y,
+ w: this.w,
+ h: this.h
+ }
+ )
+ );
},
},
props: {
+ dragID: String,
x: Number,
y: Number,
w: Number,
diff --git a/src/Grid.vue b/src/Grid.vue
index 4cef694..7011fd7 100644
--- a/src/Grid.vue
+++ b/src/Grid.vue
@@ -6,6 +6,7 @@
<DragContainer
v-for="item in items"
:key="item.key"
+ :drag-i-d="item.key"
:x="item.x"
:y="item.y"
:w="item.w"
@@ -35,8 +36,13 @@ export default {
},
methods: {
handleDrop(event) {
- let data = event.dataTransfer.getData("text");
- event.target.appendChild(document.getElementById(data));
+ let data = event.dataTransfer.getData("vueDrag/gridItem");
+ let element = JSON.parse(data);
+ console.log(element);
+ this.items.splice(this.items.findIndex((i) => {return i.key === element.key}), 1);
+ element.x = 1 + Math.trunc(event.layerX / (event.target.offsetWidth / this.cols));
+ element.y = 1 + Math.trunc(event.layerY / (event.target.offsetHeight / this.rows));
+ this.items.push(element);
},
},
data() {
--
GitLab