uniapp自定义按钮/文字页面任意位置拖动（movable-area）

高桥留

已于 2023-08-18 14:32:13 修改

阅读量357

点赞数 1

分类专栏： uniapp 文章标签： uni-app 微信小程序响应式布局

于 2023-08-18 14:26:21 首次发布

本文链接：https://blog.csdn.net/everMrzhong/article/details/132361005

版权

uniapp 专栏收录该内容

22 篇文章 7 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何在uni-app中创建一个可自定义拖动的按钮或文字，该元素可在页面任意位置移动，且不会遮挡并影响其他页面元素的点击事件。通过设置`movable-area`的初始坐标，并结合CSS样式，实现了一个灵活的拖动组件。

摘要由CSDN通过智能技术生成

自定义标签当前页面随意拖动（不遮挡页面的点击事件）

直接上代码：

1.页面结构：

<template>
    <movable-area class="movable-area">
        <movable-view class="movable-view" :x="x" :y="y" direction="all">
            <text>去安排</text>
        </movable-view>
    </movable-area>
</template>

2.data变量：

	export default {
        data() {
			return {
				x: 320,
				y: 520,
			}
		},
    }

3.css样式：

  .movable-area {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	
		.movable-view {
			pointer-event

了解本专栏