vue2中vuedraggable设置部分元素不可拖拽,不可移动

文章目录


前言

需求:左边是复选框,右边是选中的数据,编辑传入的数据不可拖拽,不可移动(其实还有一些判断的样式逻辑,不过多说明)


1、版本

javascript 复制代码
"vue": "^2.6.11",
"vuedraggable": "^2.24.3",

2、vuedraggable页面的具体使用

引入、注册、使用

javascript 复制代码
import Draggable from 'vuedraggable'
export default {
  components: {
    Draggable
  },
}
html 复制代码
<Draggable
  v-model="list"
  chosen-class="chosen"
  force-fallback="true"
  group="people"
  animation="1000"
  :move="(event) => onDraggableMove(event)"
>
  <transition-group>
    <div
      v-for="(item, index) in list"
      :key="item"
      class="item">
      {{ item }}
    </div>
  </transition-group>
</Draggable>

3.核心

(1) move官网说明

vue.draggable move 自定义控制那些元素可以拖拽或不允许拖拽并控制是否允许停靠:https://www.itxst.com/vue-draggable/ufjv2i7j.html

(2) 注意点:

move不是和@start或者@end一样,前面的是v-bind,也就是:move="方法", 参数event的打印如下

(3) onDraggableMove方法

返回false就是不能拖拽,返回true就说允许拖拽

javascript 复制代码
onDraggableMove (event) {
  console.log('event', event)
  return false // 为 false 不允许拖拽
}

总结

onDraggableMove里面的disabled 是我在绑定draggable的v-modal数据里面的item,是由于传入数据后,左边的checkout也需要disabled进行禁用。如果你不想更改源数据,你可以参考 sortable.js draggable 指定样式类的元素才允许拖动

相关推荐
汪敏wangmin6 分钟前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦1 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆1 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆1 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding1 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆1 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
angen20181 小时前
Ruby如何采集直播数据源地址
前端·chrome
goldenocean2 小时前
React之旅-05 List Key
前端·javascript·react.js
亮学长2 小时前
lodash不支持 Tree Shaking 而 lodash-es可以
大数据·前端·elasticsearch