可拖拽排序的vue组件
最近在优化一个vue的博客系统,想实现文章列表处的文章拖拽功能。就试了一下awe-dnd vue插件,觉得还挺好用的。
安装
npm install awe-dnd --save
使用
在main.js中,通过Vue.use引入
import VueDND from 'awe-dnd'
Vue.use(VueDND)
在vue文件中的使用
<template>
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData }"
:key="color.text"
>{{color.text}}</div>
</div>
</template>
<script>
export default {
data () {
return {
colors: [{
text: "Aquamarine"
}, {
text: "Hotpink"
}, {
text: "Gold"
}, {
text: "Crimson"
}, {
text: "Blueviolet"
}, {
text: "Lightblue"
}, {
text: "Cornflowerblue"
}, {
text: "Skyblue"
}, {
text: "Burlywood"
}]
}
},
mounted () {
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
console.log(value.otherData)
})
this.$dragging.$on('dragend', () => {
})
}
}
</script>
组件参数
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
item | Object | - | 每一个可拖拽的对象 |
list | Array | - | 可拖拽对象的数组 |
group | String | - | 这是一个dragging list的unique key |
拖拽完成之后,需要把新的数组顺序提交到后台,创建一个sort_order字段保存顺序。
参考: 可拖动排序的vue组件 , github
作者:real_ting
链接:https://www.jianshu.com/p/7afcf8a7af75
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
可拖拽排序的vue组件的更多相关文章
- Vue 表单拖拽排序
Vue table表单拖拽 业务需求: 因为数据展示使用的是 elementUI 的 Table进行数据展示的,现在的需求是通过拖拽表单进行表单排序.同时,动态修改表单中的数据排列顺序.查阅了好多资料 ...
- vue实现拖拽排序
基于vue实现列表拖拽排序的效果 在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标 ...
- vue列表拖拽排序功能实现
1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...
- React造轮子:拖拽排序组件「Dragact」
先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...
- vue el-transfer新增拖拽排序功能---sortablejs插件
<template> <!-- target-order="unshift"必须设置,如果不设置的话后台穿的value值得顺序会被data重置 - --> ...
- vue中基于sortablejs与el-upload实现文件上传后拖拽排序
今天做冒烟测试的时候发现商品发布有一个拖拽图片排序功能没做,赶紧加上 之前别的同事基于 vuedraggable 实现过这个功能,我这里自己深度封装了 el-upload ,用这种方式改动很大,而且感 ...
- dragsort html拖拽排序
一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通 ...
- 使用knockout-sortable实现对自定义菜单的拖拽排序
在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...
- react 拖拽排序---原生
定义css, 两个动画 .drag-up { -webkit-animation: dragup ease 0.2s 1; animation: dragup ease 0.2s 1; -webkit ...
随机推荐
- Mybatis中$和#取数据的区别
Mybatis配置中,取出map入参的数据一般有两种方式#{key}和${key},下面是这两种取值的区别: 以同样的语句做对比: <select id="geUserByParam1 ...
- 自然数幂和&伯努利数(Bernoulli)
二项式定理求自然数幂和 由二项式定理展开得 \[ (n+1)^{k+1}-n^{k+1}=\binom {k+1}1n^k+\binom {k+1}2n^{k-1}+\cdots+\binom {k+ ...
- bzoj 2751
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2751 稍微推一下就知道是每一位置可取的值的和乘起来 #include <iostrea ...
- NOIp2018集训test-9-5(am)
Problem A. maze 递归处理,题解写得真简单. 我大概这辈子也写不出来这种东西吧. Problem B. count 容易发现合法的数中一定有且仅有两个数加起来等于10,其他数两两配对加起 ...
- NX二次开发-UFUN拾取向量对话框UF_UI_specify_vector
#include <uf.h> #include <uf_ui.h> UF_initialize(); //拾取向量对话框 ], pnt[]; int mode = UF_UI ...
- 在 input 的 placeholder中 使用iconfont
写在前面 产品要求放大镜和文字放在一起.用定位,位置不准确,就会导致手机上错位,丑的一批. 进入正题 如何在input的 placeholder 中使用图标呢? 以阿里巴巴的矢量图标库为例, 现在有三 ...
- 奇思妙想:利用野指针和lower_bound()/upper_bound()函数实现整数二分
众所周知,c++的STL中提供了三个二分查找函数,binary_search(),lower_bound(),upper_bound(),功能分别是找某值是否在数组中出现,找到数组中第一个大于等于某值 ...
- opencv-图像形态学之开运算、闭运算、形态学梯度、顶帽、黑帽合辑
转自:https://blog.csdn.net/poem_qianmo/article/details/24599073 1.1 开运算(Opening Operation) 开运算(Opening ...
- window location跳转
"top.location.href"是最外层的页面跳转"window.location.href"."location.href"是本页面 ...
- Spark 调优之ShuffleManager、Shuffle
Shuffle 概述 影响Spark性能的大BOSS就是shuffle,因为该环节包含了大量的磁盘IO.序列化.网络数据传输等操作. 因此,如果要让作业的性能更上一层楼,就有必要对 shuffle 过 ...