vue3：使用draggable拖拽组件

直接复制了之前vue2的代码过来，发现一直报错，一查资料，才知道变化很大。

安装：

npm i -S vuedraggable@next

一定记得要加@next

引入：

import draggable from "vuedraggable";

使用：

用list属性，不用v-model了。

item-key必须要填。

item的slot里必须是写element，我试过写item，会报错，可以带上index，也可以不带。

<draggable :list="selectedComponents" item-key="id">
            <template #item="{ element,index }">
              <div class="selectedItem" :class="currentCptIndex === index ? 'selectedItem-active' : ''"
                @mousedown="showConfigBar(element, index)" @contextmenu.prevent="showContextMenu" @dblclick="onDblclick">
                <span v-if="!isEditMode">{{ element.cptTitle }}</span>
                <t-input v-model="element.cptTitle" v-else @blur="onBlur" @enter="onEnter" />
                <div v-if="element.cptOption.cptDataForm"
                  style="position: absolute;height: 100%;right: 0;width: 24px;top:0;">
                  <div style="width: 24px;height: 24px;margin-top: 8px;background-size: 100% 100%"
                    :style="{ backgroundImage: 'url(' + require('@/assets/icon/dataset/' + datasetIcons[element.cptOption.cptDataForm.dataSource] + '.png') + ')' }" />
                </div>
              </div>
            </template>
          </draggable>

参考：

http://t.csdnimg.cn/SDWxK

vue.draggable.next 中文文档 - itxst.com