Vue 元素拖拽组件

前言

这个组件目前支持 Vue 2,组件的主要功能为实现元素的拖拽功能。比如页面中有一个固定在左下角的元素,如果想让用户可以随时拖动这个元素。此时这个组件就可以派上用场。

github 仓库:https://github.com/zhaoxixiong/vue-drag-element

npm 包:https://www.npmjs.com/package/vue-drag-element

vue-drag-element 拖拽组件可用于移动端及 PC 端。

安装

直接在项目中通过 npm 安装

npm i vue-drag-element

使用

一个简单的示例:

<template>
  <vue-drag-element :options="options" @start="start" @move="move" @end="end">
    <!-- here insert you element -->
    <div class="ball"></div>
  </vue-drag-element>
</template>
<script>
import VueDragElement from 'vue-drag-element'
export default {
  components:{ VueDragElement },
  ......
  data() {
    return {
      options: {
         position: {
           right:12,
           top:12
        }
      }
    };
  }
......
}
</script>

这个组件提供了简单的配置,并且提供三个事件以满足在不同条件下做额外的业务处理。

初始位置

你可以通过 options 中的 position 属性的 top、right、bottom、left 来设置元素的初始位置

可移动的区域

你可以通过设置 options 中的 edgeSpace 属性来设置元素的可移动区域。这个属性收接一个数组,这个数组的长度可以为 1,也可以为 4,当是 1 时(比如:[12])则认为中边的保留区域等宽,当元素移动到距离屏幕四周边缘 12 个像素时就不可以四周边缘移动,当长度为 4 时 (比如:[24,12,24,12])则认为你给四个边都单独设置了不同宽的保留区域。

事件

你可以使用 start、move、end 三个事件(他们分别代表开始触摸、移动、手指抬起三种状态)。三个事件都会有一个参数传出,参数为当前状态的坐标对象。

如果有什么问题可以到这里提:https://github.com/zhaoxixiong/vue-drag-element/issues

声明

1.原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

2.本文永久链接:http://yunkus.com/post/5dd1f1884df664ab

3.如果觉得本文对你有帮助,或者解决了你的问题,不妨扫一扫右边的二维码打赏支持,你的一分一毫,可能会让世界变得更美好。

微信
扫一扫,赏我
支付宝
扫一扫,赏我