Nativescript-Vue 问题与平移元素答案

【问题标题】：Nativescript-Vue Issue with Panning Elements aroundNativescript-Vue 问题与平移元素
【发布时间】：2020-07-14 02:29:23
【问题描述】：

所以我正在 Nativescript-vue 中构建一个照片组创建器。我的平底锅工作正常，视图渲染正确。但我的问题是，当用户开始在它所在的容器之外平移图像时，图像会在容器“后面”。我需要它来渲染一切。我已经用 css 尝试了“z-index”，但还是不行。

这个想法是，有一组照片（未分组的组）。并且用户将能够单击并将组中的照片向下拖动到“空”组。这反过来又会创建一个新组。或者，如果有其他组，用户将能够拖动图像并将其添加到现有组中。

任何帮助或建议，提前谢谢！

这是我的 Vue 组件

<template>
  <StackLayout orientation="vertical" ref="mainContainer">
  </StackLayout>
</template>

<script>
  import * as StackLayout from 'tns-core-modules/ui/layouts/stack-layout';
  import * as Image from 'tns-core-modules/ui/image';
  import _ from 'underscore';

  export default {
        name: "photo-groupings",
        props:{
            photoList:{
                type: Object,
                required: true
            }
        },
        mounted(){
            let ungrouped = this.createGroupElement();
            let newGroupElement = this.createGroupElement();
            console.log(_.keys(this.photoList));

            for(let pht of _.keys(this.photoList)){
                console.log(pht);
                console.log(this.photoList[pht]);
                ungrouped.addChild(this.createImageChild(this.photoList[pht]))
            }
            this.$refs.mainContainer.nativeView.addChild(ungrouped);
            this.$refs.mainContainer.nativeView.addChild(newGroupElement)
        },
        data(){
            return {
                photoGroups:{},
                groupElements:{},
                prevDeltaX: 0,
                prevDeltaY: 0
            }
        },
        methods:{
            createImageChild(src){
                let tempImg = new Image.Image();
                tempImg.src = src;
                tempImg.width = 100;
                tempImg.height = 100;
                tempImg.stretch = "aspectFill";
                tempImg.borderRadius = 10;
                tempImg.borderWidth = 2;
                tempImg.borderColor = "forestgreen";
                tempImg.margin = 5;
                tempImg.on('pan', this.handlePan);
                return tempImg;
            },
            createGroupElement(){
                let tempGroup = new StackLayout.StackLayout();
                tempGroup.orientation = "horizontal";
                tempGroup.margin = 5;
                tempGroup.borderColor = "black";
                tempGroup.borderRadius = 5;
                tempGroup.borderWidth = 1;
                tempGroup.minHeight = 110;
                return tempGroup;
            },
            handlePan(args){
                if (args.state === 1) // down
                {
                    this.prevDeltaX = 0;
                    this.prevDeltaY = 0;
                    console.log(args.view.getLocationRelativeTo(args.view.parent));
                    console.log(args.view.parent.getLocationInWindow());
                }
                else if (args.state === 2) // panning
                {
                    args.view.translateX += args.deltaX - this.prevDeltaX;
                    args.view.translateY += args.deltaY - this.prevDeltaY;
                    this.prevDeltaX = args.deltaX;
                    this.prevDeltaY = args.deltaY;
                }
                else if (args.state === 3) // up
                {
                    console.log("Pan release")
                }
            }
        }
    }
</script>

<style scoped>

</style>

“后面”渲染图像的示例图像

【问题讨论】：

我需要使用绝对布局吗？
这里最好的方法是创建一个幽灵元素。您不应该移动原始图像，而是隐藏原始图像并创建一个重影，将其插入到父布局中。当用户丢弃重影图像时，销毁重影并将原始图像移动到目的地。
我会尝试这种方法，我更喜欢这种方法而不是使用绝对布局
@Manoj 你能重写你的评论并提交作为答案吗？我接受了你的建议，它的工作！我想在信用到期的地方给予信用。感谢您的建议。
很高兴你能弄明白，提交的和答案一样。

标签： nativescript nativescript-vue

【解决方案1】：

这里最好的方法是创建一个幽灵元素。

当您检测到拖动时，您不应该移动原始图像而是隐藏原始图像，创建原始图像的重影并将其插入到父布局中。当用户丢弃重影图像时，销毁重影并将原始图像移动到目的地。

【讨论】：