vue.draggable使用

最新推荐文章于 2025-10-09 03:33:53 发布

原创最新推荐文章于 2025-10-09 03:33:53 发布 · 722 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端菜鸟打怪手册专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍如何使用 Vue draggable 插件实现元素拖动功能，包括指定拖动图标和添加动画效果，通过具体代码示例展示如何设置 handle 和 animation 属性。

附上文档链接：vue.draggable中文文档（很详细！还有例子！百度了好久，靠这文档救我狗命）

主要解决两个需求：
1.点拖动的图标才能拖动元素：handle=".mover"
2.动画效果：animation=“150”

		<draggable v-model="tagTitle" animation="150" handle=".mover">
          <div class="folder" v-for="(item,index) in tagTitle" :key="item.label">
            <div class="index">{{index+2}}</div>
            <el-input maxlength="10" placeholder="请输入10字以内的文件夹名称" v-model.trim="item.name">
              <i slot="suffix" class="iconfont icongonggong_shanchu"></i>
              <i slot="suffix" class="iconfont icongonggaobaohu_tuodong mover"></i>
            </el-input>
          </div>
        </draggable>