Skip to content
Snippets Groups Projects
Commit 45625cd7 authored by Julian's avatar Julian
Browse files

Start developing functionality

parent 41d17a2f
No related branches found
No related tags found
1 merge request!2Resolve "Implement basic functionality"
<template>
<div @dragstart="handleDragStart">
<div @dragstart="handleDragStart" draggable="true" id="wrapper">
<slot>
<div id="container"></div>
<div id="container">
<dl>
<dt>Position</dt>
<dd>{{ x }}, {{ y }}</dd>
<dt>Size</dt>
<dd>{{ w }} × {{ h }}</dd>
</dl>
</div>
</slot>
</div>
</template>
......@@ -12,12 +19,23 @@ export default {
methods: {
handleDragStart(event) {
event.dataTransfer.setData("text", event.target.id);
}
}
}
},
},
props: {
x: Number,
y: Number,
w: Number,
h: Number,
},
};
</script>
<style scoped>
#wrapper {
grid-column: v-bind(x) / span v-bind(w);
grid-row: v-bind(y) / span v-bind(h);
}
#container {
background: lightcoral;
width: 100%;
......
<template>
<div @dragover.prevent @drop.prevent="">
<div @dragover.prevent @drop.prevent="handleDrop" class="grid">
<slot name="highlight">
<div id="highlight"></div>
</slot>
<DragContainer
v-for="item in items"
:key="item.key"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
>
</DragContainer>
</div>
</template>
<script>
import DragContainer from "./DragContainer.vue";
export default {
name: 'Grid',
name: "Grid",
components: {
DragContainer,
},
props: {
rows: {
type: Number,
......@@ -23,9 +37,18 @@ export default {
handleDrop(event) {
let data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
}
}
},
},
data() {
return {
items: [
{ x: 3, y: 3, w: 1, h: 1, key: "obj1" },
{ x: 1, y: 1, w: 1, h: 1, key: "obj2" },
{ x: 4, y: 3, w: 2, h: 2, key: "obj3" },
],
};
},
};
</script>
<style scoped>
......@@ -33,4 +56,15 @@ export default {
background: darkgrey;
border: grey dashed 2px;
}
.grid {
display: grid;
grid-template-columns: repeat(v-bind(cols), 1fr);
grid-template-rows: repeat(v-bind(rows), 1fr);
width: 100%;
height: 100%;
min-width: 100px;
min-height: 100px;
gap: 1em;
}
</style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment