今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort。

vue-slicksort 一款功能强大的可拖拽的vue.js组件。拥有丝滑般拖拽动画效果，支持水平/垂直/网格拖拽排序。还可以自动滚动、锁定坐标系，并支持触摸。

代码片段

"true"  :pressDelay="300"  v-model="appitems"  helperClass="helperClass"class="ul"  axis="xy">for="(item,index) in appitems" :index="index" :key="index" class="li">

class="{'add-border':isEditMenus}" class="app-border" @click="toApp(item)">"item.menuIcon" class="app-icon">

{{ item.menuName }}

if="isEditMenus" src="@/assets/del.png" class="del" @click.stop="delApp(item,index)">

安装

$ npm i vue-slicksort -S

插件使用

<template><div class="slicksort-wrap">

<SlickList      :lockToContainerEdges="true"      lockAxis="y"      v-model="items"      @input="getChangeLists"    ><SlickItem v-for="(item, index) in items" :index="index" :key="index">        {{ item }}SlickItem>SlickList>div>template>

<script>import { SlickList, SlickItem } from "vue-slicksort";export default {  components: {    SlickItem,    SlickList  },  data() {    return {      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8']    };  },  methods: {    getChangeLists(vals) {    // 拖拽完成后返回被打乱后的顺序      console.log(vals);    }  }};script>

组件参数

组件事件

提供各种演示示例，让拖拽排序变得如此简单。

贴上示例地址及仓库地址

# 预览地址https://jexordexan.github.io/vue-slicksort/

# github地址https://github.com/Jexordexan/vue-slicksort

好了，就分享到这里。感兴趣的小伙伴可以去尝试下哈。

来源：

https://www.toutiao.com/i6842622910692065803/

“IT大咖说”欢迎广大技术人员投稿，投稿邮箱：aliang@itdks.com

来都来了，走啥走，留个言呗~

 IT大咖说  |  关于版权 

由“IT大咖说(ID：itdakashuo)”原创的文章，转载时请注明作者、出处及微信公众号。投稿、约稿、转载请加微信：ITDKS10(备注：投稿)，茉莉小姐姐会及时与您联系！

感谢您对IT大咖说的热心支持！

相关推荐

推荐文章

• 利用YOLOV3检测算法来实现人物定位与距离计算，打造全球定位系统

• Docker命令行参数和Dockerfile指令「收藏版」

• 为什么选择javafx？

• 分分钟学会前端sku算法(商品多规格选择)

• 可算是有文章，把Linux零拷贝技术讲透彻了

• 人工智能大逆转，高薪工作反而被淘汰！谁才是未来“最没用的人”