Nativescript-Vue Issue with Panning Elements around

Question

So I am building a photo group creator in Nativescript-vue. I have the pan working and the view is rendering correctly. But my issue is when a user starts to pan the image outside the container it's in, the image goes 'behind' the container. And I need it to render ontop of everything. I have tried 'z-index' with css and still no go.

The idea is, there is a group of photos (un-grouped group). And the user will be able to click-and-drag a photo in the group down to an 'empty' group. And this in turn would create a new group. Or if there were other groups the user would be able to drag an image and add it to an existing group.

Any help or suggestions, thank you in advance!

This is my Vue Component

<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>

Example Image of the images rendering 'behind'

Answer 1

The best way here would be creating a ghost element.

You should not move the original image but hide the original image when you detect drag, create a ghost of original image and insert it on the parent layout. When user drops the ghost image, destroy the ghost and move original image to destination.