vuedraggable（怎么使用vuedraggable实现简单的拖拽，只拖拽一个内容（div））
本文目录
怎么使用vuedraggable实现简单的拖拽，只拖拽一个内容（div）
仔细观察发现，今日头条导航部分效果，有以下几个效果
1：点击开启可以的效果（也就是是否开启拖拽）
2：拖拽前选中效果
3：拖动过程中元素移动到目标位置的运动效果
这是Vue.Draggable作者的git引入之后我们发现Vue.Draggable默认就是开启拖拽状态的，那我们要控制这个状态怎么办呢？在作者项目的首页，发现并没有详细介绍，是不是有这个状态提供，当然也许是因为自己英语太渣，没有发现这句话（See here for reference）
https://www.jsykyy.com/#RubaXa/Sortable#event-object-demo后来发现，点进去，发现了很多好玩的东西，具体有哪些，这里我们只挑我们需要的，然后我就发现这个东东：
这不就是我们想要的么，如果你认为是这个属性直绑定到组件上，那么你就错了，在往下看，似乎有怎么使用的实例代码，那我们不妨看看是怎么样的：
其实看到这个你大概知道怎么用了，如果还不会那么不着急，我贴一下我的代码你就知道怎用了
嗯就是这么简单，然后你再去控制这个disable就可以，至于怎么控制，接触过vue的人应该都会，就不说了，到这里我们第一个问题就解决，那我后面两个问题呢？
别急，其实和第一个一模一样
还有一些其他配置项的解释：
1.ghostClass:’ghostClass’;拖拽中占位的元素的类名（一般设置opacity:1）达到空出该位置的视觉效果
2.dragClass:’dragClass’;元素拖拽中的类名
哈哈就是这么简单，惊不惊喜，意不意外！！！之前之所以，称之为问题是因为，以为那些配置项都是直接配置在组件上的，好了上面三个问题基本算是解决了，其实我们发现，这个过程中烦在哪里，就是知道配置项options是挂在在draggable组件上，那些控制draggable的行为都是在options里面配置的，经验告诉我们，一定要仔细阅读文档，答案都在文档里面，好了，如果能帮助到正在看文章的你
vue 的vuedraggable 引入失败
报错与引入无关，下面的代码格式错误```javascript《script》import vuedraggable from ’vuedraggable’export default {compoments: {},...}《/script》```
更多文章：
2025年2月25日 00:20
localstorage设置过期时间（html5的localStorage可否设置数据的时效时间）
2025年3月25日 16:50
crucial 英文单词（critical or crucial 区别）
2025年3月28日 02:30
字符串数组长度怎么算（C语言编程中，输入一个字符串数组，如何得出该数组的长度）
2025年3月3日 07:00
2025年2月27日 10:30
indicate是什么意思中文（indicate 的中文意思）
2025年3月3日 02:20
2025年4月4日 21:50
postgresql官方下载（python postgresql 哪个好）
2025年2月16日 09:40
most怎么读（project、smoke、ago、most读音一样吗）
2025年2月24日 15:10
excel宏下标越界咋解决（EXCEL VBA 下标越界如何解决）
2025年3月14日 21:20
2025年3月24日 02:30
halfway的用法（Halfway through是什么意思是动词短语么该怎么使用）
2025年3月9日 00:30
2025年4月4日 17:40
2025年4月1日 05:20
lookup和find函数套用（EXCEL函数 FIND LOOKUP）
2025年3月28日 12:50
2025年2月21日 15:00
sql语句查询表（如何用SQL语句查询一个数据表所有字段的类型）
2025年2月27日 22:30
2025年3月5日 18:20
2025年3月2日 20:20
