Skip to content
Snippets Groups Projects

Resolve "Implement basic functionality"

Merged Julian requested to merge 1-implement-basic-functionality into main
1 file
+ 15
1
Compare changes
  • Side-by-side
  • Inline
+ 15
1
<template>
<template>
<div @dragstart="handleDragStart" :draggable="!isDisabled" id="wrapper">
<div
 
@dragstart="handleDragStart"
 
:draggable="!isDisabled"
 
id="wrapper"
 
ref="wrapper"
 
@dragend="handleDragEnd"
 
>
<slot></slot>
<slot></slot>
</div>
</div>
</template>
</template>
@@ -10,6 +16,7 @@ export default {
@@ -10,6 +16,7 @@ export default {
methods: {
methods: {
handleDragStart(event) {
handleDragStart(event) {
if (this.isDisabled) return;
if (this.isDisabled) return;
 
this.$refs.wrapper.style.cursor = "grabbing";
event.dataTransfer.setData(
event.dataTransfer.setData(
"vueDrag/gridItem",
"vueDrag/gridItem",
JSON.stringify({
JSON.stringify({
@@ -24,6 +31,9 @@ export default {
@@ -24,6 +31,9 @@ export default {
})
})
);
);
},
},
 
handleDragEnd() {
 
this.$refs.wrapper.style.cursor = "grab";
 
},
},
},
props: {
props: {
dragID: {
dragID: {
@@ -80,6 +90,9 @@ export default {
@@ -80,6 +90,9 @@ export default {
isDisabled() {
isDisabled() {
return this.disabled || this.isNotInGrid;
return this.disabled || this.isNotInGrid;
},
},
 
cursor() {
 
return this.disabled ? "auto" : "grab";
 
},
},
},
};
};
</script>
</script>
@@ -89,5 +102,6 @@ export default {
@@ -89,5 +102,6 @@ export default {
grid-column: v-bind(getX) / span v-bind(w);
grid-column: v-bind(getX) / span v-bind(w);
grid-row: v-bind(getY) / span v-bind(h);
grid-row: v-bind(getY) / span v-bind(h);
display: v-bind(getDisplay);
display: v-bind(getDisplay);
 
cursor: v-bind(cursor);
}
}
</style>
</style>
Loading