Skip to content

BosenY/vue-drag

Repository files navigation

vue-dragging

vue-dragging,一个自己写的vue插件,可以给任意标签添加拖拽的功能。  

说明

 目前重点放在别的东西上,所以这个插件不再更新,只能用于pc端,移动端自己可以fork进行优化。  

Install

yarn add vue-dragging

演示(demo)

点击这里

How to use

普通html

<script src="./vue.js"></script>
<script src="./vue-drag.min.js"></script>

是vue-drag.js不是vue-dragging.js

如果你的项目使用vue-cli搭建的 那么请这样使用:

import Vue from 'vue'
import vueDrag from 'vue-dragging'
Vue.use(vueDrag)

在html当中添加标签,然后添加一个'v-drag',假设为:

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

这样绑定的dom就可以拖拽

1.1.0

加入了一个可拖拽区域和不可拖区域的方法,示例如下:

        <div class="demo2" v-drag="'#dragable'">
            <div id="dragable"><span>这里可以拖动</span></div>
            <div class="content"><span>这里不可以</span></div>
        </div>

value传的是一个选择器,会让当前dom下第一个找到的seletor允许拖拽

如果你想让鼠标指针变成move,那么这样:

        <div class="demo2" v-drag.cursor="'#dragable'">
            <div id="dragable"><span>这里可以拖动</span></div>
            <div class="content"><span>这里不可以</span></div>
        </div>

当然你也可以自己写样式去替换

About

vue-drag:一个vue的拖拽插件

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages