vuedraggable前端拖拽插件

https://www.npmjs.com/package/vuedraggable
https://vue-draggable-plus.pages.dev/

在页面中导入插件

import draggable from "vuedraggable";

<draggable
  :list="pageList"
  sort="true"
  ghost-class="ghost"
  chosen-class="chosenClass"
  animation="300"
  @start="onStart"
  @end="onEnd"
>
  <template #item="{ element, index }">
    <div
      class="posr border br8 flex pt20 pb20 pl10 pr10 mg20 item"
      style="align-items: start"
    >
      <el-popconfirm
        title="确认删除吗?"
        @confirm="deletePage('page', index)"
        @cancel="cancelEvent"
      >
        <template #reference>
          <el-icon
            size="20px"
            color="#aaa"
            class="posa c-point"
            style="top: 10px; right: 10px"
          >
            <Close />
          </el-icon>
        </template>
      </el-popconfirm>
    </div>
  </template>
</draggable>