【报Bug】movable-area 在父元素存在旋转的情况下，移动方向存在问题。

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Mac

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

HBuilderX类型：正式

HBuilderX版本号： 3.8.4

浏览器平台： Chrome

浏览器版本：版本 114.0.5735.198（正式版本） (x86_64)

项目创建方式： HBuilderX

示例代码：

<template>  
    <view class="page-body">  
        <page-head title="movable-view,可拖动视图"></page-head>  
        <view class="uni-padding-wrap uni-common-mt landscape-screen">  
            <view class="uni-title uni-common-mt">Bug示例</view>  
            <movable-area>  
                <movable-view direction="all">text</movable-view>  
            </movable-area>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {};  
    },  
    methods: {}  
};  
</script>  

<style>  
.landscape-screen {  
    display: flex;  
    top: 0px;  
    left: 0px;  
    height: 100vw;  
    width: 100vh;  
    overflow: hidden;  
    transform-origin: 0px 0px 0px;  
    transform: rotateZ(90deg) translateY(-100vw);  
    transition: 1s;  
}  

movable-view {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    height: 150rpx;  
    width: 150rpx;  
    background-color: #007aff;  
    color: #fff;  
}  

movable-area {  
    height: 300rpx;  
    width: 100%;  
    background-color: #d8d8d8;  
    overflow: hidden;  
}  
</style>

操作步骤：

直接运行，每次都复现

预期结果：

元素应该跟随鼠标方向移动

实际结果：

移动方向与拖拽方向成反向方向

bug描述：

当movable-area的父元素存在以下css样式时，movable-view 的拖动方向会发生错误。
transform-origin: 0px 0px 0px;
transform: rotateZ(90deg) translateY(-100vw);
transition: 1s;

2023-07-03 00:01 负责人:无分享

2 个回复

千杯不醉 (作者)

能否给一个借口，当值变化时，自己实时更新元素的位置呢

1***@qq.com

请问有什么好的方法解决吗

要回复问题请先登录或注册

【报Bug】movable-area 在父元素存在旋转的情况下，移动方向存在问题。

操作步骤：

直接运行，每次都复现

预期结果：

元素应该跟随鼠标方向移动

实际结果：

移动方向与拖拽方向成反向方向

bug描述：

2 个回复

公告

相关问题

【报Bug】movable-area 在父元素存在旋转的情况下，移动方向存在问题。

操作步骤： 直接运行，每次都复现

预期结果： 元素应该跟随鼠标方向移动

实际结果： 移动方向与拖拽方向成反向方向

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

操作步骤：

直接运行，每次都复现

预期结果：

元素应该跟随鼠标方向移动

实际结果：

移动方向与拖拽方向成反向方向