Skip to content
Snippets Groups Projects
Commit 59987a22 authored by Julian's avatar Julian
Browse files

Save ID of grid

parent c239cfbc
No related branches found
No related tags found
1 merge request!2Resolve "Implement basic functionality"
<template> <template>
<div @dragstart="handleDragStart" draggable="true" id="wrapper"> <div @dragstart="handleDragStart" :draggable="!isDisabled" id="wrapper">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
...@@ -9,6 +9,7 @@ export default { ...@@ -9,6 +9,7 @@ export default {
name: "DragContainer", name: "DragContainer",
methods: { methods: {
handleDragStart(event) { handleDragStart(event) {
if (this.isDisabled) return;
event.dataTransfer.setData( event.dataTransfer.setData(
"vueDrag/gridItem", "vueDrag/gridItem",
JSON.stringify({ JSON.stringify({
...@@ -19,6 +20,7 @@ export default { ...@@ -19,6 +20,7 @@ export default {
h: this.h, h: this.h,
data: this.data, data: this.data,
context: this.context, context: this.context,
originGridId: this.gridId,
}) })
); );
}, },
...@@ -31,13 +33,36 @@ export default { ...@@ -31,13 +33,36 @@ export default {
h: Number, h: Number,
data: Object, data: Object,
context: String, context: String,
gridId: String,
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;
},
}, },
}; };
</script> </script>
<style scoped> <style scoped>
#wrapper { #wrapper {
grid-column: v-bind(x) / span v-bind(w); grid-column: v-bind(getX) / span v-bind(w);
grid-row: v-bind(y) / span v-bind(h); grid-row: v-bind(getY) / span v-bind(h);
display: v-bind(getDisplay);
} }
</style> </style>
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
:h="get('h', item)" :h="get('h', item)"
:data="item.data" :data="item.data"
:context="context" :context="context"
:grid-id="gridId"
> >
<slot v-bind="item" name="item"> <slot v-bind="item" name="item">
<dl> <dl>
...@@ -71,6 +72,11 @@ export default { ...@@ -71,6 +72,11 @@ export default {
required: false, required: false,
default: uuidv4, default: uuidv4,
}, },
gridId: {
type: String,
required: false,
default: uuidv4,
},
}, },
methods: { methods: {
positionAllowed(x, y, key) { positionAllowed(x, y, key) {
......
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