fix(webui): drag series by handle when editing collection

closes #214
This commit is contained in:
Gauthier Roebroeck 2020-06-19 22:13:12 +08:00
parent 2528d74f35
commit e72f4ab57e

View file

@ -6,6 +6,7 @@
> >
<draggable v-model="localItems" <draggable v-model="localItems"
class="d-flex flex-wrap" class="d-flex flex-wrap"
handle=".handle"
v-bind="dragOptions" v-bind="dragOptions"
> >
<transition-group type="transition" :name="!draggable ? 'flip-list' : null" <transition-group type="transition" :name="!draggable ? 'flip-list' : null"
@ -22,6 +23,7 @@
:class="draggable ? 'draggable-item' : undefined" :class="draggable ? 'draggable-item' : undefined"
> >
<item-card <item-card
class="item-card"
:item="item" :item="item"
:width="itemWidth" :width="itemWidth"
:selected="active" :selected="active"
@ -33,6 +35,7 @@
<v-slide-y-reverse-transition> <v-slide-y-reverse-transition>
<v-icon v-if="draggable" <v-icon v-if="draggable"
class="handle"
style="position: absolute; bottom: 0; left: 50%; margin-left: -12px;" style="position: absolute; bottom: 0; left: 50%; margin-left: -12px;"
> >
mdi-drag-horizontal mdi-drag-horizontal
@ -169,20 +172,16 @@ export default Vue.extend({
</script> </script>
<style scoped> <style scoped>
.ghost * { .ghost .item-card {
opacity: 0.5; opacity: 0.5;
background: #c8ebfb; background: #c8ebfb;
} }
.draggable-item * { .handle {
cursor: move; cursor: grab;
} }
.flip-list-move { .flip-list-move {
transition: transform 0.4s; transition: transform 0.4s;
} }
.fab-delete * {
cursor: pointer;
}
</style> </style>