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

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

install

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

using

如果直接下载下来的话引入vue.js和vue-drag.js就够了,就下面两个:


然后html的标签当中加入“v-drag”指令就行:


然后给要实现拖拽的标签添加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呦,小弟在此谢过!

你可能感兴趣的:(分享一个自己写的vue插件: vue-dragging)