0


uniapp 实现拖拽功能

项目需求:

客户要求;微信客服功能悬浮,并且可以在页面进行,拖拽移动,

功能实现:

uniapp中有专门实现拖动效果的组件,以下代码

  1. <movable-area class="movableArea" v-else-if="isShowPhone==0">
  2. <movable-view class="movableView" direction="all" x="600rpx" y="800rpx">
  3. <button>需要移动的元素</button>
  4. </movable-view>
  5. </movable-area>

movable-area :可移动的范围

movable-view :可移动的元素

css部分

  1. .movableArea{position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;//设置area元素不可点击,则事件便会下移至页面下层元素
  2. }.movableView{pointer-events: auto;//可以点击
  3. }

欧克 问题解决

标签: uni-app css 前端

本文转载自: https://blog.csdn.net/m0_48557659/article/details/129620005
版权归原作者 啥也不会ln 所有, 如有侵权,请联系我们删除。

“uniapp 实现拖拽功能”的评论:

还没有评论