本文简要介绍在Vue项目中利用draggable实现拖拽排序的功能,先简单展示下具体功能。
如上图所示,点击【排序】之前list中每个item不能进行排序,当选中【排序】后可以拖拽的方式进行排序。下面就简单介绍些该功能中实现的组件和具体的代码。
draggable是一款非常实用而且功能强大的实现拖拽功能的组件,它有很多不错的公开的属性供使用者设置。想要详细了解的话,可去GitHub中draggable官网查看,这里不多赘述。
draggable引入
在windows环境下,首先打开cmd环境,cd到vue项目目录中,执行如下操作。
npm install vuedraggable
然后在vue文件中以如下方式引入
<script>
import Vue from 'vue';
import draggable from 'vuedraggable'
...
后面就可以进行开发了,本文demo中.vue组件对应的代码如下所示。
代码展示
<template>
<div class="div_template_list">
<draggable class="draggable" draggable="false" :lis