vue拖拽排序插件vuedraggable的使用 附原生使用方法
Vue中使用
先下载依赖:
npm install vuedraggable -S
项目中引入
import draggable from 'vuedraggable'
注册
components: {
draggable
},
demo:
<template>
<draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
<transition-group>
<div v-for="element in colors" :key="element.text" class = "drag-item">
{{element.text}}
</div>
</transition-group>
</draggable>
</template> <script>
import draggable from 'vuedraggable'
export default{
data(){
return{
msg:"这是测试组件",
colors: [
{
text: "Aquamarine",
},
{
text: "Hotpink",
},
{
text: "Gold",
},
{
text: "Crimson",
},
{
text: "Blueviolet",
},
{
text: "Lightblue",
},
{
text: "Cornflowerblue",
},
{
text: "Skyblue",
},
{
text: "Burlywood",
}
],
startArr:[],
endArr:[],
count:0,
}
},
components: {
draggable
},
methods:{
getdata (evt) {
console.log(evt.draggedContext.element.text)
},
datadragEnd (evt) {
evt.preventDefault();
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
console.log(this.colors);
}
},
mounted () {
//为了防止火狐浏览器拖拽的时候以新标签打开,此代码真实有效
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
}
}
</script> <style lang="scss" scoped>
.test{
border:1px solid #ccc;
}
.drag-item{
width: 200px;
height: 50px;
line-height: 50px;
margin: auto;
position: relative;
background: #ddd;
margin-top:20px;
}
.ghostClass{
opacity: 1;
}
.bottom{
width: 200px;
height: 50px;
position: relative;
background: blue;
top:2px;
left: 2px;
transition: all .5s linear;
}
</style>
原生方法使用
<transition-group tag="div" class="container">
<div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.color,width:'80px',height:'80px'}"
draggable="true"
@dragstart="handleDragStart($event, item)"
@dragover.prevent="handleDragOver($event, item)"
@dragenter="handleDragEnter($event, item)"
@dragend="handleDragEnd($event, item)" >
</div>
</transition-group>
<script>
export default {
name: 'Toolbar',
data () {
return {
items: [
{ key: 1, color: '#ffebcc'},
{ key: 2, color: '#ffb86c'},
{ key: 3, color: '#f01b2d'}
], dragging: null
}
},
methods:{
handleDragStart(e,item){
this.dragging = item;
},
handleDragEnd(e,item){
this.dragging = null
},
//首先把div变成可以放置的元素,即重写dragenter/dragover
handleDragOver(e) {
e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
},
handleDragEnter(e,item){
e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
if(item === this.dragging){
return
}
const newItems = [...this.items]
console.log(newItems)
const src = newItems.indexOf(this.dragging)
const dst = newItems.indexOf(item) newItems.splice(dst, 0, ...newItems.splice(src, 1)) this.items = newItems
}
}
}
</script> <style scoped>
.container{
width: 80px;
height: 300px;
position: absolute;
left: 0;
display:flex;
flex-direction: column;
padding: 0;
}
.item {
margin-top: 10px;
transition: all linear .3s
}
vue拖拽排序插件vuedraggable的使用 附原生使用方法的更多相关文章
- Sortable拖拽排序插件数据筛选
后台有拖拽排序功能,然而前段在开发的时候,一整页的数据都发给后端了. 于是查看前端代码,想到了如下解决办法,即先把排序前的保存,然后对比排序后的,有差异的才发回给后端. var new_ids_ord ...
- 拖拽排序插件 ---- Dragula
相关链接: https://github.com/bevacqua/react-dragula https://github.com/bevacqua/react-dragula demo: ht ...
- vue el-transfer新增拖拽排序功能---sortablejs插件
<template> <!-- target-order="unshift"必须设置,如果不设置的话后台穿的value值得顺序会被data重置 - --> ...
- Vue 拖拽组件 vuedraggable 和 vue-dragging
一.描述 之前用 vue 写过一个在线的多二维码生成服务,体验地址:https://postbird.gitee.io/vue-online-qrcode/ 后面发现二维码多了之后有时候想要排序,需要 ...
- Vue 表单拖拽排序
Vue table表单拖拽 业务需求: 因为数据展示使用的是 elementUI 的 Table进行数据展示的,现在的需求是通过拖拽表单进行表单排序.同时,动态修改表单中的数据排列顺序.查阅了好多资料 ...
- vue列表拖拽排序功能实现
1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...
- vue实现拖拽排序
基于vue实现列表拖拽排序的效果 在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标 ...
- vue中基于sortablejs与el-upload实现文件上传后拖拽排序
今天做冒烟测试的时候发现商品发布有一个拖拽图片排序功能没做,赶紧加上 之前别的同事基于 vuedraggable 实现过这个功能,我这里自己深度封装了 el-upload ,用这种方式改动很大,而且感 ...
- dragsort html拖拽排序
一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通 ...
- 使用knockout-sortable实现对自定义菜单的拖拽排序
在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...
随机推荐
- 【PyQt6】Python中QDateTime的常用方法总结
前置 QtDesigner里拖了一个QDateTimeEdit,设置时间格式为"yyyy/MM/dd HH:mm:ss" 常用函数 dt1 = object1.dateTime() ...
- 20200924--图像相似度(奥赛一本通P92 5多维数组)
给出两幅相同大小的黑白图像(用0-1矩阵)表示,求它们的相似度.说明:若两幅图像在相同位置上的像素点颜色相同,则称它们在该位置具有相同的像素点.两幅图像的相似度定义为相同像素点数占总像素点数的百分比. ...
- SQL之查询
1. SQL之模糊查询 例如查询姓名时,不用输入全名,仅仅输入其中的一部分 语法: select 列名 from 表名 where 列名 like 匹配串 其中 匹配串用英文的单引号括起来 四种匹配模 ...
- snpEFF注释的vcf文件转化成maf文件
利用一个perl语言写的工具:snpeffTomaf 一行代码即可实现非常方便 github地址链接:https://github.com/tsy19900929/snpeffToMaf 将此仓库中的 ...
- 2月21日python程序设计
Python变量 1.不需要事先声明变量名及其类型,直接赋值即可. 2.强类型编程语言,根据赋值或运算来推断变量类型. 3.动态类型语言,变量的类型也是可以随时变化的. >>> x ...
- Git Peer reports incompatible or unsupported protocol version
今天用git克隆一个项目的时候出现标题中的错误 fatal: unable to access 'xxx.git/': Peer reports incompatible or unsupported ...
- CSS 常用样式-盒模型属性
盒模型又叫框模型,包含了五个用来描述盒子位置.尺寸的属性,分别是宽度 width.高度 height.内边距 padding. 边框 border.外边距 margin. 常见盒模型区域: • 盒模型 ...
- 调试以及Linq查询
1.调试的步骤 调试快捷键: F10逐过程(不会进入函数内部,直接获取函数运行结果) F11逐语句(会进入函数) F5执行,如果调试中多个断点,按F5执行到下一个断点 出现黄色箭头表示执行到这一句,但 ...
- PHP做API开发该如何设计签名验证
前言 开发过程中,我们经常会与接口打交道,有的时候是调取别人网站的接口,有的时候是为他人提供自己网站的接口,但是在这调取的过程中都离不开签名验证. 我们在设计签名验证的时候,请注意要满足以下几点: 可 ...
- IT工具知识-08:如何使用Openwrt下的SMB服务(第一次使用时)?
0.背景知识 使用固件:Lean的R20.5.9由flippy打包 需要软件:ssh客户端(我用的xshell),浏览器(最好是chrome内核) 1.使用教程 1.1 注释掉SAMBA模板中的某条指 ...