vue指令快速拖拽效果，额外附加3个小功能
Demo预览：
https://sunzsh.github.io/vue-demos/#/drag
代码 / 文件：
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/drag.vue
https://gist.github.com/sunzsh/ddb7c1d129c74222e9235bbdac407766
这是一个绝对定位的容器
今天啊
给大家分享一段可以快速实现
拖拽效果的
vue指令
那用起来很简单
就直接在这加一个 v-drag 就行了
大家看
它就可以拖拽了
这段代码呢也是我在网上找的
然后基于我的需求加了3个功能
我先给大家介绍一下这三个功能
第一个呢
就是我在这啊设置了一个区域
就是当我们把这个容器啊拖拽到
超出这个范围了
那我们就会给这个容器加一个标识
加一个什么标识呢就在这
会多一个dragged
我们有啥用呢我们可以在这加样式
比如说
我让他拖拽走了之后呢
dragged
比如让他变高
比如就200吧
刷新
大家看啊拖拽走变高，放回来他就变矮了
好这是第一个功能
第二个呢就是
有时候啊我们在这里边需要有一个
div的标题
然后呢我先给他加一个背景颜色
加高 20吧
然后呢背景色
大家看我们现在想让他呀
点上面的标题才能拖拽
下边不能拖拽
我们可以直接把这个v-drag
放到这个蓝色的标题上
大家看下面就不能拖拽了
只有上面可以了
那这个的规则就是
我们会顺着这个
v-drag的容器往外层找
找到第一个是position定位的 (口误：absolute）
然后去移动这个
然后第三个功能呢
就是啊我们可以加一个属性
在这这个属性：drag-min-top
它可以设置上面的边界
比如说设置一个
这样的话他往上拖拽的时候
纵坐标不能小于
刷新一下
大家看到这个边缘
就不行了
那关于这个代码呢
我也是放到这个代码片段里了
回头我把这些链接啊什么的
也都会放到
那个按字幕搜索的那个网站里边
最后更新于