vue拖拽克隆clone组件API, vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档)
效果图:
首先需要安装vuedraggable依赖包:
npm install vuedraggable --save
因为拖拽组件依赖sortablejs ,如果项目没有安装sortablejs ,可能需要安装一下
npm install sortablejs --save
复制vue html代码到项目:
<template> <div class="dndList"> <div class="dndList-list"> <h3>常用</h3> <draggable :list="list1" :options="{group:'article', disabled: disabled}" @start="start22" @end="end22" class="dragArea11" style="height: 100px"> <div v-for="(element, index) in list1" :key="element.id" class="list-complete-item"> <div class="list-complete-item-handle">{ {element.name}}</div