vue开发,div拖拽移动,触屏自由拖动悬浮球按钮Demo,鼠标拖拽

在vuejs框架开发的时候，产品经理要实现一个自由拖拽移动的按钮。

那就先做个Demo吧

先在技术上，实现产品经理的梦想，程序员的工作职能，就是为老板、为产品经理实现梦想。

div拖拽移动,自由拖动悬浮球按钮Demo, 支持手指拖动和鼠标拖拽

vuejs:
    https://registry.npmmirror.com/vue/2.6.14/files/dist/vue.min.js

v-drag.js 开源库
    https://cdn.jsdelivr.net/npm/v-drag@3.0.9/dist/browser.js
    或者 https://unpkg.com/v-drag@3.0.9/dist/browser.js

安装 v-drag.js：
    npm install v-drag@3.0.9
    import drag from "v-drag"

    Vue.use(vdrag, {
        // global configuration
    });
使用 v-drag ：
    <div v-drag>拖拽demo</div>

下面的demo写好了，直接测试吧，手机直接用手指拖动，PC电脑用鼠标拖动吧

手指、鼠标自由拖动的div元素

用到的开源库：https://github.com/nil/v-drag

兼容性：vue2 vue3

参考上述代码，一个自由拖动的div元素，就完成了。

支持PC鼠标拖动

支持手机触屏手指拖动

一个 iPhone iOS辅助触控悬浮球拖动效果，就做好了，直接参考demo实现吧。

vue开发,div拖拽移动,触屏自由拖动悬浮球按钮Demo,鼠标拖拽

div拖拽移动,自由拖动悬浮球按钮Demo, 支持手指拖动和鼠标拖拽

相关功能