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

Example for isDraggedOver

parent 7b0daa34
No related branches found
No related tags found
1 merge request!12Pass dragging information to slot for disabled fields
...@@ -3,23 +3,31 @@ import DragGrid from "../../src/DragGrid.vue"; ...@@ -3,23 +3,31 @@ import DragGrid from "../../src/DragGrid.vue";
</script> </script>
<template> <template>
<drag-grid <div>
v-model="someDisabledItems" <label>
:cols="4" <input type="checkbox" v-model="showDisabled" />
:rows="4" Show disabled fields even when not dragged over?
class="size" </label>
:disabled-fields="disabledFields" <drag-grid
> v-model="someDisabledItems"
<template #item="{ rawItem }"> :cols="4"
<div :rows="4"
class="container" class="size"
:style="{ background: rawItem.disabled ? 'red' : 'green' }" :disabled-fields="disabledFields"
></div>
</template>
<template #disabledField
><div class="container">This field is disabled!</div></template
> >
</drag-grid> <template #item="{ rawItem }">
<div
class="container"
:style="{ background: rawItem.disabled ? 'red' : 'green' }"
></div>
</template>
<template #disabledField="{ isDraggedOver }">
<div class="container" v-show="showDisabled || isDraggedOver">
This field is disabled!
</div>
</template>
</drag-grid>
</div>
</template> </template>
<script> <script>
...@@ -40,6 +48,7 @@ export default { ...@@ -40,6 +48,7 @@ export default {
{ x: 2, y: 3 }, { x: 2, y: 3 },
{ x: 4, y: 2 }, { x: 4, y: 2 },
], ],
showDisabled: false,
}; };
}, },
}; };
......
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