<template> <div> <draggable tag="ul" :model-value="list" v-bind="{ group: { name: 'form-draggable', pull: 'clone', put: false }, sort: false, clone: cloneItem, animation: 180, ghostClass: 'moving', }" item-key="type" @start="handleStart($event, list)" @add="handleAdd" > <template #item="{ element, index }"> <li class="bs-box text-ellipsis" @dragstart="$emit('add-attrs', list, index)" @click="$emit('handle-list-push', element)" > <!-- <svg v-if="element.icon.indexOf('icon-') > -1" class="icon" aria-hidden="true"> <use :xlink:href="`#${element.icon}`" /> </svg> --> <Icon :icon="element.icon" /> {{ element.label }}</li ></template > </draggable> </div> </template> <script lang="ts"> import { defineComponent, reactive } from 'vue'; import { IVFormComponent } from '../../../typings/v-form-component'; import draggable from 'vuedraggable'; // import { toRefs } from '@vueuse/core'; import { Icon } from '/@/components/Icon'; export default defineComponent({ name: 'CollapseItem', components: { draggable, Icon }, props: { list: { type: [Array] as PropType<IVFormComponent[]>, default: () => [], }, handleListPush: { type: Function as PropType<(item: IVFormComponent) => void>, default: null, }, }, setup(props, { emit }) { const state = reactive({}); const handleStart = (e: any, list1: IVFormComponent[]) => { emit('start', list1[e.oldIndex].component); }; const handleAdd = (e: any) => { console.log(e); }; // https://github.com/SortableJS/vue.draggable.next // https://github.com/SortableJS/vue.draggable.next/blob/master/example/components/custom-clone.vue const cloneItem = (one) => { return props.handleListPush(one); }; return { state, handleStart, handleAdd, cloneItem }; }, }); </script> <style lang="less" scoped> @import url(../styles/variable.less); ul { padding: 5px; list-style: none; display: flex; margin-bottom: 0; flex-wrap: wrap; // background: #efefef; li { padding: 8px 12px; transition: all 0.3s; width: calc(50% - 6px); margin: 2.7px; height: 36px; line-height: 20px; cursor: move; border: 1px solid @border-color; border-radius: 3px; &:hover { color: @primary-color; border: 1px solid @primary-color; position: relative; // z-index: 1; box-shadow: 0 2px 6px @primary-color; } } } svg { display: inline !important; } </style>