javascript
<template>
<view class="dargbox" id="dargbox" style="top: 0;left: 0;" @touchstart="renDer.touchstart"
@touchmove="renDer.touchmove" @touchend="renDer.touchend">
<video class="player" :enable-progress-gesture="false"
src="https://yosm-file.aushanviviin.com/pc/upload/video/2022/07/62de0def6e161.mp4"></video>
</view>
</template>
<script module="renDer" lang="renderjs">
let pageX
let pageY
export default {
mounted() {
let dargbox = document.getElementById('dargbox')
console.log(dargbox.style.top)
console.log(dargbox.style.left)
},
methods: {
touchstart(e) {
pageX = e.changedTouches[0].pageX
pageY = e.changedTouches[0].pageY
},
touchmove(e) {
let moveX = e.changedTouches[0].pageX - pageX
let moveY = e.changedTouches[0].pageY - pageY
let dargbox = document.getElementById('dargbox')
let position = dargbox.getBoundingClientRect()
dargbox.style.left = position.x + moveX + 'px'
dargbox.style.top = position.y + moveY + 'px'
pageX = e.changedTouches[0].pageX
pageY = e.changedTouches[0].pageY
},
touchend() {
},
}
}
</script>
<style lang="less">
.dargbox {
width: 180px;
height: 248px;
position: absolute;
background-color: #000;
border-radius: 10rpx;
video {
width: 100%;
height: 100%;
}
}
</style> 
1***@qq.com
- 发布：2023-01-07 21:55
- 更新：2023-01-07 21:58
- 阅读：300
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.6.15
手机系统： Android
手机系统版本号： Android 12
手机厂商： vivo
手机机型： vivoX80
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
新建页面，复制粘贴示例代码，运行到App端
新建页面，复制粘贴示例代码，运行到App端
预期结果：
类似拼多多商品详情页的悬浮可拖拽的直播小窗口
类似拼多多商品详情页的悬浮可拖拽的直播小窗口
实际结果：
view被拖动了，video标签不动
view被拖动了，video标签不动
bug描述：
video标签在view里面，renderjs改变view的top和left，视频不动
1 个回复
1***@qq.com (作者)
安卓手机@touchmove拖动视频窗口好卡，超级卡，所以希望可以用renderjs实现