【报Bug】renderjs做可拖拽得悬浮小窗视频，App端外层view被拖动了，视频不会动

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10

HBuilderX类型：正式

HBuilderX版本号： 3.6.15

手机系统： Android

手机系统版本号： Android 12

手机厂商： vivo

手机机型： vivoX80

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

复制代码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>

操作步骤：

新建页面，复制粘贴示例代码，运行到App端

预期结果：

类似拼多多商品详情页的悬浮可拖拽的直播小窗口

实际结果：

view被拖动了，video标签不动

bug描述：

video标签在view里面，renderjs改变view的top和left，视频不动

2023-01-07 21:55 负责人:无分享

1 个回复

1***@qq.com (作者)

安卓手机@touchmove拖动视频窗口好卡，超级卡，所以希望可以用renderjs实现

该问题目前已经被锁定, 无法添加新回复

【报Bug】renderjs做可拖拽得悬浮小窗视频，App端外层view被拖动了，视频不会动

操作步骤：

新建页面，复制粘贴示例代码，运行到App端

预期结果：

类似拼多多商品详情页的悬浮可拖拽的直播小窗口

实际结果：

view被拖动了，video标签不动

bug描述：

1 个回复

公告

相关问题

【报Bug】renderjs做可拖拽得悬浮小窗视频，App端外层view被拖动了，视频不会动

操作步骤： 新建页面，复制粘贴示例代码，运行到App端

预期结果： 类似拼多多商品详情页的悬浮可拖拽的直播小窗口

实际结果： view被拖动了，video标签不动

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

新建页面，复制粘贴示例代码，运行到App端

预期结果：

类似拼多多商品详情页的悬浮可拖拽的直播小窗口

实际结果：

view被拖动了，video标签不动