支持触屏设备和大部分浏览器的拖拽排序插件sortable

最近用了一款比draggable还好用的拖拽插件sortable，在移动端拖拽过程中呈现的动画也是一级棒！！！

先说下这个插件在vue项目中的用法，下篇讲解下js用法。

下载地址：https://github.com/SortableJS/Vue.Draggable

使用方法：

一. 下载包：npm i vuedraggable -save (后加-save 保存配置到package.json)

二. 使用：

引入依赖，注册组件

import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...

html:

<draggable class="page-my-menus-content" v-model="myMenus"
           :options="{group:'group01',animation:'150',filter:'.page-my-menus-add'}" @start="drag=true"
           @end="drag=false" @update="datadragEnd">
  <li v-for="item in myMenus" :key="item.id">
    <span class="iconfont" :class="`icon-${item.id}`"></span>
    <p>{{item.name}}</p>
    <span class="iconfont icon-shanchu1" @click="deleteMenu(item)"></span>
  </li>
  <li class="page-my-menus-add" v-if="myMenus.length<7"></li>
</draggable>

data:

data () { 
    return {
　　　　//测试用
      myArray: [{"id":"srjd","name":"收入进度"},
{"id":"szfb","name":"税种分布"},
{"id":"srqs","name":"收入趋势"},
{"id":"sryb","name":"收入月报"}]     
    }
  },

效果图：

(上传图片的功能坏了，后期补上)

该插件还有很多属性和配置项，下篇会详细介绍。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/zmm13298329239/article/details/83021603
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-07 13:14:56
阅读 ( 1507 )
分类：

支持触屏设备和大部分浏览器的拖拽排序插件sortable

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看