vuedraggable拖拽插件使用

文档地址：http://www.itxst.com/vue-draggable/tutorial.html

引入方式（npm）：

npm i -S vuedraggable

简单使用：

<template><div><el-row><el-col :span="12" class="col"><span>A列</span><draggable v-model="list"chosenClass="chosen"group= "name"animation="300"filter=".forbid":move="onMove"><transition-group><div class="dragItem" :id="item.name" v-for="(item,index) in list" :key="item.name"><div>索引：{{index}}</div><div class="name">姓名:<span>{{item.name}}</span></div><div>年龄:{{item.age}}</div><div>工作:{{item.job}}</div></div></transition-group></draggable></el-col><el-col :span="12" class="col"><span>B列</span><draggable v-model="list2"chosenClass="chosen"group= "name"animation="300"><transition-group><div class="dragItem" v-for="(item,index) in list2" :key="item.name"><div>索引：{{index}}</div><div class="name">姓名:<span>{{item.name}}</span></div><div>年龄:{{item.age}}</div><div>工作:{{item.job}}</div></div></transition-group></draggable></el-col></el-row>  </div>
</template><script>
export default {components:{draggable:() => import("vuedraggable"),},data(){return{list:[{name:"tom",age:18,job:"coding1"},{name:"bob",age:19,job:"coding2"},{name:"jery",age:20,job:"coding3"},{name:"jim",age:21,job:"coding4"},],list2:[{name:"tom2",age:182,job:"coding12"},{name:"bob2",age:192,job:"coding22"},{name:"jery2",age:202,job:"coding32"},{name:"jim2",age:212,job:"coding42"},]}},methods:{//禁止拖动到id为1的对象onMove(e){ console.log(e);console.log(e.draggedContext.futureIndex);if(e.draggedContext.futureIndex <=1) return false;return true;},  }
}
</script><style lang="scss" scoped>
.col{&>div{min-height: 100px;border:14px solid purple;border-radius:4px;}
}
.dragItem{.name{font-weight: 600;span{color:red;}}border:1px solid blue;border-radius:4px;padding:4px;margin-bottom:8px;
}
</style>

效果：

上面是实现了分组拖拽，也可以组内拖拽，并且限制了不能拖拽到几号位

一些属性的说明，具体可以插卡安文档，文档精巧，还有例子，查看方便：

group	:group= "name"，相同的组之间可以相互拖拽
sort	:sort= "true",是否开启内部排序,如果设置为false,它所在组无法排序，在其他组可以拖动排序
delay	:delay= "0", 鼠标按下后多久可以拖拽
touchStartThreshold	鼠标移动多少px才能拖动元素
disabled	:disabled= "true",是否启用拖拽组件
animation	拖动时的动画效果，还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果
handle	:handle=".mover" 只有当鼠标移动到css为mover类的元素上才能拖动
filter	:filter=".unmover" 设置了unmover样式的元素不允许拖动
draggable	:draggable=".item" 那些元素是可以被拖动的
ghostClass	:ghostClass="ghostClass" 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
chosenClass	:ghostClass="hostClass" 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
dragClass	:dragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
dataIdAttr	dataIdAttr: 'data-id'
forceFallback	默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true
fallbackClass	默认false，克隆的DOM元素的类名
allbackOnBody	默认false，克隆的元素添加到文档的body中
fallbackTolerance	拖拽之前应该移动的px
scroll	默认true,有滚动区域是否允许拖拽
scrollFn	滚动回调函数
scrollSensitivity	距离滚动区域多远时，滚动滚动条
scrollSpeed	滚动速度

vuedraggable拖拽插件使用相关推荐

vue3TS+Jsplumb+vuedraggable拖拽插件使用记录
安装拖拽插件 vue3需下载-@next此版本,否则会出现错误 npm i -S vuedraggable@next npm install sortablejs --save //拖拽组件依赖sor ...
【组件】前端js拖拽插件 VUE
[组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...
sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
java se拖动插件_JQuery之拖拽插件
Jeremy - DragDrop Test !(function($) { $.extend({//获取鼠标当前坐标mouseCoords:function(ev){if(ev.pageX||ev. ...
拖拽插件jquery.dad.js
带删除功能: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
java se拖动插件_JQuery之拖拽插件实现代码
而很多页面效果都要用到这些位置.不得已,得练练,得记记. 下面就来说说这个基于 JQuery的简易拖拽插件吧. 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤: 那什么是拖拽呢? 看名字就知道了: ...
js 拖拽生成html,js拖拽插件 js 拖拽控件生成自定义表单怎么实现
想请教一个js的问题,拖拽控件 js 拖拽控件生成自定义表单怎么实现说说步骤吧监听mousedown事件 - 获取鼠标点击元素,判断是否可拖拽 - 设置flag做标记 - 建一个tempDOM, ...
Vue拖拽插件（vuedraggable）
参考文档: vue.draggable disabled 开启和禁用拖动 - itxst.com 效果如下图: ① 安装插件:yarn add vuedraggable ②引入插件并使用: <t ...
类似360浏览器拖拽插件_又一个好用的能上谷歌学术的插件，收藏吧。！
前段时间,给大家安利了一个能上谷歌学术的插件: 大飞鸽软件助手:一个插件,让你轻松浏览谷歌学术,助力科研!zhuanlan.zhihu.com 废话不多说,今天再次安利一个能够上谷歌学术的插件. 这 ...

vuedraggable拖拽插件使用

vuedraggable拖拽插件使用相关推荐

最新文章

热门文章