How to move a widget to a location inside AbsoluteLayout?


#1

I tried both

AbsoluteLayout.setTop(view, 20);

and

view.top = 20;

but both would not move the view to another location.

How do I correctly do this?

Thanks.


#2

@MarriedRhombus Every possible syntax seems working on my end, can you try updating the playground example below to reproduce your issue? Also let us know what is the NativeScript version you are using.


#3

I wrote it in Angular and this is inside a component. I’m trying to implement a drag and drop, and I was testing the drop state by just moving the image back somewhere inside the AbsoluteLayout.

  onPanTest(args: PanGestureEventData) {
    if (args.state === 1) // down
      {
        this.prevDeltaX = 0;
        this.prevDeltaY = 0;
      }
      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
      {

        //test. would not work.
        args.view.set('top',100);
        args.view.set('left',100);

      }
  }

#4

After playing with translateX / translateY you have to reset them to get proper output with left / top. Try setting them to 0.

        args.view.translateX = 0;
        args.view.translateY = 0;
        args.view.set('top',100);
        args.view.set('left',100);

#5

Yes this worked perfectly when run in a device. But in the emulator, it would not render the image to the new location unless I put a delay in the set lines:

  onPanTest(args: PanGestureEventData) {
    if (args.state === 1) // down
      {
        this.prevDeltaX = 0;
        this.prevDeltaY = 0;
      }
      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
      {
        args.view.translateX = 0;
        args.view.translateY = 0;

        setTimeout(()=>{
          args.view.set('top', 100);
          args.view.set('left', 100);
        },100);

      }
  }

Anyway, that should be another issue so I’m marking this as solved.
THANKS!!!