vue项目中draggable实现拖拽排序

本文简要介绍在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" :list="list2" :move="getdata" @update="datadragEnd":options="{disabled:!modeSort,animation: 300,handle:'.dargDiv'}"><transition-group name="list-complete"><div v-for="element in list2" :key="element.it.name" class="list-complete-item"><div class="styleclass dargDiv"><img class="img_template_item_remove" src="../assets/ic_remove_red.png" v-if="modeRemove"/><p>{{element.it.name}}</p><img class="img_template_item_sort" src="../assets/logo.png" v-if="modeSort"/></div></div></transition-group></draggable></div>
</template><script>import Vue from 'vue';import draggable from 'vuedraggable'require.config({urlArgs: "ver=1.0_0",paths: {"vue": 'vue.min2',"sortablejs": 'Sortable',"vuedraggable": 'vuedraggable'},shim: {'vue': {exports: 'vue'}}})export default {data(){return {modeRemove: false,modeSort: false,list2: [{id: "id1", it: {name: '项目合理同意审批'}},{id: "id2", it: {name: '项目不合理不同意审批'}},{id: "id3", it: {name: '项目需要修改暂缓审批'}},{id: "id4", it: {name: '未确认项目，需要重新确认'}},{id: "id5", it: {name: '项目非当前审批人审批，转相关人员'}}]}},mounted(){},components: {draggable},props: [],computed: {},methods: {goBack(){this.$router.go(-1);},addTemplate(){console.log("加上一项")},handleChange() {console.log('changed');},inputChanged(value) {this.activeNames = value;},getdata: function (evt) {console.log(evt.draggedContext.element.id);},datadragEnd: function (evt) {console.log('拖动前的索引：' + evt.oldIndex);console.log('拖动后的索引：' + evt.newIndex);},getComponentData() {return {on: {change: this.handleChange,input: this.inputChanged},props: {value: this.activeNames}};}}}</script><style lang="stylus" scoped>[v-cloak] {display: none;}.draggable {.list-complete-item {transition: all 1sheight: 2.5remline-height: 2.5remcolor: blacktext-align: centerfont-size: 10ptvertical-align: middlemargin-top: 0.1remborder-bottom: #e0e0e0 0.8px solidmargin-left: 1remmargin-right: 1rem}.styleclass {width: 100%display: inline-blocktext-align: leftheight: 2.5remline-height: 2.3rempadding-top: 0.2rem}.dargDiv {cursor: move}.img_template_item_remove {width: 1.2remheight: 1.2remmargin-top: 0.65remfloat: leftmargin-right: 0.3rem}.img_template_item_sort {width: 1.2remheight: 1.2remmargin-top: 0.65remvertical-align: middlefloat: rightright: 0.5rem}p {display: inline-blockheight: 2.5remline-height: 2.5remwidth: 85%margin-left: 0.2remwhite-space: nowraptext-overflow: ellipsisoverflow: hidden}}
</style>

vue项目中draggable实现拖拽排序相关推荐

vue项目中图标可拖拽功能实现
vue项目中页面实现图标拖拽功能最近在做项目需求时有个小功能:在页面的首页增加一个快速功能按钮,用来满足操作者快速实现某一目的渴望.为了体现代码搬运工的气质与水准,当时心想,这么简单的一个小东西必须 ...
Vue的v-for中列表项拖拽排序详细方法
首先:HTML中,关键点是监听拖拽的三个阶段,即:dragstart/dragover/dragend,注意:要拖拽元素必须加上draggable="true" <ul @d ...
draggable布局 vue_Vue.Draggable （拖拽排序）
安装 npm install vuedraggable 1 引入 import draggable from 'vuedraggable' 1 基础用法定义一个json串 list,实现它的拖拽排序 ...
vue的移动app项目中，自定义拖拽指令的问题
使用vue的都知道vue有一个自定义指令,我比较喜欢的就是拖拽的自定义指令,感觉挺方便的! //组件内的拖拽指令 directives: {//组建内自定义指令drag: {// 指令的定义bind: ...
html5+vue无法拖拽,Vue拖拽排序插件Vuedraggable使用方法详解_心善_前端开发者
大家好,最近做的项目要用到拖拽排序,我现在的项目是首先在 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import ...
sortable vue 排序_vue 使用 sortable 实现 el-table 拖拽排序功能
本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能,具体内容如下所示: npm 下载: npm install sortablejs --save 引入: import ...
vue项目中，兼容vue3.0 1.0 2.0 宫格拖拽排序，特殊五小一大六宫格拖拽
前端时间写了标准宫格拖拽排序的文章 1. 2.4.9.12等等标准宫格拖拽,基于vue-grid-layout 拖拽换位无刷新 vue项目中基于vue-grid-layout开发的拖拽 ...
vue项目中五小一大六宫格拖拽排序，6宫格拖拽换位，矩阵拖拽排序
背景:项目中用到1.4.6.9.12.16宫格排序,拖拽换位等场景,项目是监控的视频矩阵,用户矩阵拖拽排序换位,之前已经实现1.4.9.12.16等矩阵式排列的拖拽排序,但是六宫格要求五小一大,之前的 ...
全网为数不多清晰可行的在VUE中使用sortable.js实现动态拖拽排序的教程！
目录 0 写在前面的 1 依赖安装 2 手写简单标签演示 3 要点 4 效果 0 写在前面的首先批评以下文章 (10条消息) sortable.js 实现拖拽_sortablejs_花铛的博客-CS ...

vue项目中draggable实现拖拽排序

draggable引入

代码展示

vue项目中draggable实现拖拽排序相关推荐

最新文章

热门文章