此插件vue git: https://github.com/SortableJS/Vue.Draggable

vue 里使用示例: https://sortablejs.github.io/Vue.Draggable/#/simple  (示例右角按钮 可跳转到相关源码)

源git:             https://github.com/SortableJS/Sortable

基于Sortable.js http://www.cnblogs.com/xiangsj/p/6628003.html

使用方法:

一. 下载包:cnpm install vuedraggable -S   (后加-S 保存配置到package.json)


二. 使用:

引入依赖,注册组件

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

html:

<draggable v-model="myArray">
<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

data:

data () {
return {
    //测试用
myArray: [{
id:"1",
name:"aaaaaaaaaaaaa",
},{
id:"2",
name:"bbbbbbbbbbbbb",
},{
id:"3",
name:"ccccccccccccccc",
}]
}
},

如上图,拖拽排序实现了,


三. 拓展使用:

分组排序和部分手势:options="{group:'group01'}",拖拽中,拖拽结束,及进行排序后的存储(按索引)...

<draggable v-model="myArray"
handle=".handle"
:group="{ name: 'people'}"
@change="datadragEnd"
>
<transition-group>
<div v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable> methods: {
datadragEnd (evt) {
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
}
}

.

Vue.Draggable/SortableJS 的排序功能,在VUE中的使用的更多相关文章

  1. vue列表拖拽排序功能实现

    1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...

  2. Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题

    Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...

  3. 简单实现Redis缓存中的排序功能

    1.在实现缓存排序功能之前,必须先明白这一功能的合理性.不妨思考一下,既然可以在数据库中排序,为什么还要把排序功能放在缓存中实现呢?这里简单总结了两个原因:首先,排序会增加数据库的负载,难以支撑高并发 ...

  4. redis(四)--简单实现Redis缓存中的排序功能

    在实现缓存排序功能之前,必须先明白这一功能的合理性.不妨思考一下,既然可以在数据库中排序,为什么还要把排序功能放在缓存中实现呢?这里简单总结了两个原因:首先,排序会增加数据库的负载,难以支撑高并发的应 ...

  5. Vue.Draggable 文档总结

    本文章转自https://blog.csdn.net/zjiang1994/article/details/79809687 Vue.Draggable学习总结 Draggable为基于Sortabl ...

  6. Vue.Draggable

    Vue.Draggable拖动效果 下载包:npm install vue-draggable --save 组件中引进依赖: import draggable from 'vuedraggable' ...

  7. Vue.Draggable实现拖拽效果(采坑小记)

    之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...

  8. Vue (二) --- Vue对象提供的属性功能

    --------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...

  9. vue 对象提供的属性功能、通过axio请求数据(2)

    1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...

随机推荐

  1. Codeforces Round #545 Div1 题解

    Codeforces Round #545 Div1 题解 来写题解啦QwQ 本来想上红的,结果没做出D.... A. Skyscrapers CF1137A 题意 给定一个\(n*m\)的网格,每个 ...

  2. 【转】.MD语法入门

    @2019-02-13 [小记] .MD语法入门

  3. docker-compose.yml(2)

    实例2:version: '3'services: user-service: image: "$DOCKER_SERVICE_IMAGE_TAG" network_mode: & ...

  4. bzoj3959(LCT)

    题目描述 某校开展了同学们喜闻乐见的阳光长跑活动.为了能“为祖国健康工作五十年”,同学们纷纷离开寝室,离开教室,离开实验室,到操场参加3000米长跑运动.一时间操场上熙熙攘攘,摩肩接踵,盛况空前. 为 ...

  5. 【mysql】mysql尾部空格

    mysql 字段为varchar类型的在查询时候胡忽略尾部空格. 先看表结构 插入一条数据包含空格 在查询是可以查到的 所有在插入数据的时候要对插入字段的数据处理下,php可以用函数trim()去掉两 ...

  6. NOIp2018爆零记

    Day-2~Day0 考前抱佛脚,赶紧刷刷各种模板 Day 1 在开考之前打好了拍子模板,然后试题密码就发下来了(这是我前面的神仙打了\(100\)多行\(emacs\)的配置\(QAQ\)). 先按 ...

  7. PHP基础学习----字符串操作

    1.单引号和双引号的区别 在php中,字符串的定义可以使用英文单引号'',也可以使用英文双引号“”: <?php $str = 'hello'; echo "str is $str&q ...

  8. Loj 103、10043 (KMP统计子串个数)

    KMP算法学习链接:https://blog.csdn.net/starstar1992/article/details/54913261/ KMP算法:可以实现复杂度为O(m+n) 为何简化了时间复 ...

  9. Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

    Github样式显示参考:点我 之前说过用word写文章,这次说说Markdown写文章(推荐) 逆天推荐使用VSCode编写 装这个插件写作更方便: 内含:锚点使用,使用HTML,新页面跳转,目录生 ...

  10. 洛谷P4070 生成魔咒

    题意:给定字符串,求每个前缀的本质不同的子串数量.字符集1e9. 解:在线构造后缀自动机并统计答案. 答案就是∑len[i] - len[fail[i]] 每次增加的时候,至多对三个节点有影响.然而把 ...