苏州餐饮 网站建设,简单的视频网站能不能用dw做,建立网站加强家园沟通和联系的做法有何利弊,经营性质网站Draggable为基于Sortable.js的vue组件#xff0c;用以实现拖拽功能。
特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时#xff0c;可以抛出所有变化 可…Draggable为基于Sortable.js的vue组件用以实现拖拽功能。
特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时可以抛出所有变化 可以和现有的UI组件兼容
工作中使用了基于vue的拖动组件vuedraggable在这里进行一些总结。
详细的官网案例https://www.npmjs.com/package/vuedraggable
1.简单的拖动使用
templatedivdraggable startstart endendp v-ford in list :keyd.id{{d.name}}/p/draggable/div/templatescriptimport draggable from vuedraggable;export default {components: {draggable},data() {return {list: [{ name: John, id: 1 },{ name: Joao, id: 2 },{ name: Jean, id: 3 },{ name: Gerard, id: 4 }]}},methods: {start (e) {console.log(e)},end (e) {console.log(e)},}}/script先引用安装好的vuedraggable插件然后引入到该组件即可使用draggable标签那么该标签下的p标签就可以进行拖动排序。
其中的start,end事件是拖动开始和结束事件需要注意一下几个字段表示的是拖动开始的下标和结束的下标位置。
可以利用其改动的下标进行排序
2.固定其他位进行某一位排序
在我的工作中需要进行某一位进行拖动排序而其他不动代码如下
templatediv styleborder: 1px solid #e8e8e8;width: 300px;draggable v-modelreportList endendEvent v-binddragOptionsp v-forr in reportList :keyr.id :classr.active ? active : disabled{{r.name}}/p/draggable/div/templatescriptimport draggable from vuedraggableexport default {components: {draggable},data () {return {dragOptions: {animation: 500,filter: .disabled},reportList: [{ id: 1, name: javascript, active: true},{ id: 2, active: false, name:css },{ id: 3, active: false, name: typescript },{ id: 4, active: false, name: vue.js },{ id: 5, active: false, name: nodejs }]}},methods: {endEvent () {console.log(this.reportList) // 自动更新reportList}}}/script此时只有javascript那一栏可以拖动其他栏为禁止状态由dragOption中的filter实现过滤并添加动画效果
同时我还发现其拖动结束后打印的list竟然是排序后的结果这样真的很方便
3.复制拖动 初始状态如上所示我现在需要的是将左侧按钮内容拖动到右侧且左侧依旧存在。代码如下
templatediv styleheight: 1000px;div stylefloat:left;width: 300px;!-- 左侧按钮 --draggablev-modellist1draggable.c-itemv-binddragOptions:options{sort: false, group: {name: field, pull:clone,put: false}}div v-ford in list1 :keyd.id classitem c-item{{d.name}}/div/draggable/divdiv stylefloat:right;width: 300px;!-- 右侧按钮 --draggable groupfield :listlist2 v-binddragOptions changetoChangediv v-ford in list2 :keyd.id classitem{{d.name}}/div/draggable/div/div/templatescriptimport draggable from vuedraggable;export default {components: {draggable},data() {return {dragOptions: { animation: 500 },list1: [{ name: John, id: 1 },{ name: Joao, id: 2 },{ name: Jean, id: 3 },{ name: Gerard, id: 4 }],list2: [{ name: Juan, id: 5 },{ name: Edgard, id: 6 },{ name: Johnson, id: 7 }]};},methods: {toChange(e) {br console.log(e)if (e.added) {console.log(this.list2)}}}};/script左侧的draggable标签添加了options配置项
sort:false 表示拖动时禁止其进行排序操作
group: {name: ‘field’, pull: ‘clone’, put: false} 表示进行克隆拖动操作并且该name和拖动的目标位置group名称一致如右侧draggable标签的group同样为field
draggable“.item” 将可拖动属性下放到每一个按钮下
右侧接收的draggable标签添加标识group“field”同时含有change事件可以返回添加各种事件有兴趣的可以查看官网。我这边是添加事件
如下图所示拖动后返回add事件并且打印的list 是排好序的list
