左右平移元素的 Nativescript-Vue 问题

Question

所以我正在 Nativescript-vue 中构建一个照片组创建器。我有平底锅工作，视图正确呈现。但我的问题是，当用户开始在其所在容器外平移图像时，图像会进入 'behind' 容器。我需要它来渲染一切。我试过 'z-index' 和 css 但还是不行。

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

任何帮助或建议，在此先感谢您！

这是我的 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>

图像渲染的示例图像'behind'

Answer 1

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

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

左右平移元素的 Nativescript-Vue 问题

Nativescript-Vue Issue with Panning Elements around

nativescript

nativescript-vue