vuedraggable前端拖拽插件

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

在页面中导入插件

javascript 复制代码
import draggable from "vuedraggable";
html 复制代码
<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>
相关推荐
snow@li2 小时前
前端:软件开发中的秤砣理论 / 越简单越可靠 / 提炼组织架构 / 精确标定工作 / 有主干有支流 / 不追求繁琐 / 不做表面工作
前端·架构
张毫洁2 小时前
将后端resources中的文件返给前端下载的方法
前端·状态模式
Hao_Harrision2 小时前
50天50个小项目 (React19 + Tailwindcss V4) ✨| RandomChoicePicker(标签生成)
前端·typescript·react·vite7·tailwildcss
浮游本尊2 小时前
React 18.x 学习计划 - 第九天:React 18高级特性和最佳实践
前端·学习·react.js
诸神缄默不语2 小时前
用Vite创建Vue3前端项目
前端·vite·cue3
旧梦吟2 小时前
脚本 生成图片水印
前端·数据库·算法·golang·html5
How_doyou_do2 小时前
模态框与DOM,及React和Vue中的优化
前端·vue.js·react.js
前端不太难2 小时前
RN 的导航体系太混乱,如何选型和架构设计?
前端·react native·架构