Cacher is the code snippet organizer for pro developers

<draggable
	v-model="product.images"
	v-bind="dragOptions"
	@start="drag = true"
	@end="drag = false">
	<transition-group
		class="row small-gutter"
		type="transition"
		:name="!drag ? 'flip-list' : null">
		<div class="col" v-for="(image, index) in product.images" :key="index + 0">
			<div class="pc-image draggable" :class="{ 'is-loading': image === '' }">
				<div class="img" :style="{ backgroundImage: `url('${image}')` }"></div>
				<i class="material-icons" v-tooltip="'Remove'" @click="removeProductImages(index)">close</i>
			</div>
		</div>
	</transition-group>
</draggable>

.flip-list-move {
	transition: transform 0.2s;
}

.no-move {
	transition: transform 0;
}

.sortable-ghost {
	opacity: 0.5;
	background: #c8ebfb;
}

.draggable {
	cursor: move;
}