【vue开发基础】之拖拽组件

❤ 写在前面

如果觉得对你有帮助的话，点个小❤❤ 吧，你的支持是对我最大的鼓励~
欢迎关注我的公众号【有更多的前端教程】 或者来看 我的个人网站

---

---

❤ 前言

中文文档： 打开有惊喜

---

❤ 第一步 导入JS

NPM或yarn安装方式

yarn add vuedraggable
npm i -S vuedraggable

直接导入js也可

<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
<script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>

---

❤ 第二步 vue使用

<draggable v-model="form.list" chosenClass="chosenClass" forceFallback="true" animation="300">
	<transition-group>
    	<div v-for="(item,index) in list" :key="index">
    		<!-- 这里是你要拖动的区域 -->
	  	</div>
    </transition-group>
</draggable>

/* 选中时的样式 */
.chosenClass{
}

❤ 总结

Thanks♪(･ω･)ﾉ，到此就结束了，有什么问题都可以问！
欢迎评论 / 私信我~