适用于微信小程序及手机app的一种DOM拖拽事件处理

本文介绍了如何在使用uni-app开发的微信小程序及手机APP中实现DOM元素的拖拽事件处理。虽然APP可以使用renderJS操作DOM,但微信小程序不支持。作者提出了一种通过动态style来实现拖拽移动的方案,但当内容过多导致滚动条出现时,会出现节点整体移动的问题。为解决这个问题,作者将内容分为上下两部分,分别设置高度和overflow,以实现简单的拖拽功能。
摘要由CSDN通过智能技术生成

注:

由于用的uniapp开发app及微信小程序所以逻辑一样可以共用一套代码但是app可以用renderJS操作dom但是微信小程序端不支持,后来想到本功能的操作很简单仅拖拽上下移动可以使用动态style的方法试试,但是这种方法有一弊端 当内容过多出现滑块时会出现拖动节点整体随之移动现象。但是我的功能比较简单上面是题目内容,中间拖拽节点下面答案和解析我只要分开设置高度再分别设置overflow即可。
//上半部分

<view class="contentRead" v-if="subject.optionList != undefined" :style="{'min-height':currentIndex == index ? conHeight:'122px'}">

//中间节点方法

<view style="width: 100%;height: 7vw;line-height: 7vw;text-align: center;" @touchmove="touchmoveX" >
										<
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值