分享一个自己写的vue插件: vue-dragging

这几天为了项目需要,让我写一些自定义指令,可以对元素进行各种操作的,我就先试着写了一个拖拽的,第一次写,还没有经验,不过以后会不断增加功能并更新的。

install

npm install vue-dragging
或者是直接从github下载 git clone https://github.com/BosenY/vue-drag.git

using

如果直接下载下来的话引入vue.js和vue-drag.js就够了,就下面两个:
<script src="./vue.js"></script>
<script src="./vue-drag.js"></script>
然后html的标签当中加入“v-drag”指令就行:

<div class="demo"> <div class="drag" v-drag></div></div>

然后给要实现拖拽的标签添加css属性:

.drag { position: absolute; top: 20px; left: 20px; width: 200px; height: 200px; background: green; }

记住,必须要有position:absolute属性!!! 然后就是vue的一个初始化工作

new Vue({ 
el: '.demo', 
data: { }
 })

如果是npm下载的,就先import

import vueDrag from 'vue-dragging'

然后加上

Vue.use(vueDrag)

然后加入“v-drag”指令的标签就可以任意拖拽啦!
第一次写,不是很熟练,而且功能也很简单,以后会进一步添加功能并写出其他的插件来。
喜欢的大大大佬们可以给我一个star呦,小弟在此谢过!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容