vue拖拽排序插件vuedraggable

  • 首先在vue项目中,用npm包下载下来
  npm install vuedraggable -s
  • 下载下来后,引入插件,在你的vue文件的script标签里面这样引入
import draggable from 'vuedraggable'
  • 注册组件
components: {
    draggable
}
  • 使用案例
   <draggable :list="testBasketList.question"
              :options="{ forceFallback: true }"
              class="examinationListContent">
            <div v-for="(item,index) in testBasketList.question"
                   :key="item.type_id">
                <div class="examinationTitle examinationTitleActionContent">
                    <div class="isNotClearOrder"></div>
                </div>
                <draggable :list="item.questions"
                           :options="{ forceFallback: true }">
                    <div class="questionContainer"
                         v-for="(v,k) in item.questions"
                         :key="v.id">
                         <div class="examinationContainer">
                              <div class="examinationContent">
                                   <div class="content"></div>
                              </div>
                         </div>
                    </div>
                </draggable>
            </div>
    </draggable>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 8,175评论 1 4
  • Vue.js新手入门指南 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异...
    joker731阅读 4,302评论 0 12
  • Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨...
    劳卜阅读 53,609评论 22 420
  • 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容...
    前端一菜鸟阅读 6,593评论 1 13
  • Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨...
    人不中二枉少年阅读 5,211评论 0 19

友情链接更多精彩内容