用vue封装一个页面可以拖动按钮

最新推荐文章于 2024-08-29 15:10:00 发布

Eli-sun

最新推荐文章于 2024-08-29 15:10:00 发布

阅读量446

点赞数 3

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/vfjcgg/article/details/138793534

版权

用vue封装一个页面可以拖动按钮

这段代码定义了一个DraggableButton组件，该组件可用于在页面上创建可拖动按钮。该组件接受两个道具:x和y，它们指定按钮在页面上的初始位置，并在按钮被拖动时发出一个拖动事件。

组件使用data函数来管理按钮的拖动状态和位置。handleMouseDown和handleTouchStart方法处理拖动操作的开始，handleMouseMove和handleTouchMove方法处理拖动操作期间按钮的移动。handleMouseUp和handleTouchEnd方法处理拖动操作的结束。

<template>
  <div
    ref="button"
    :style="{
   
      position: 'absolute',
      top: `${
     y}px`,
      left: `${
     x}px`,
      cursor: 'grab',
      cursor: '-webkit-grab',
      zIndex: 9999,
    }"
    @mousedown="handleMouseDown"
    @touchstart="handleTouchStart"
  >
    Drag me!
  </div>
</template>

<script>
export default {
   
  props: {
   
    x: {
   
      type: Number,
      default: 0,
    }