Reposition element after that is draggable

How-to Discussions
1

I have an image that is wider than the screen.
I would like the user to move the image but to move the image up to the edge limit.

The behavior I am trying to simulate is that of the PanGesture with the constrainelement property. The problem that the pangesture work with 2 fingers. But I want the image to be draggable with 1 finger.

This is a draft that I tried to get:


Once the user clicks on the left edge of the image, it is moved to the left by a certain amount which I have to calculate but which for the sake of simplicity I have now put fixed.

I used attractor, the problem that the first time that the active works … but then if I reactivate it again nothing happens. Can you help me?

EXAMPLE COMPLETE:

<App>

	<JavaScript>
	var Observable = require("FuseJS/Observable");
	var reposition=Observable(false);
	
	function newposition(args){
		if(args.localX<400){
			reposition.value=true;
			setTimeout(function(){
				reposition.value=false;
			},200);
		}
	}
	module.exports={reposition:reposition,newposition:newposition}
   </JavaScript>

	<Image Url="http://via.placeholder.com/1000x500" Width="1000" Height="500"  Released="{newposition}">
		<Translation RelativeTo="ParentSize" ux:Name="TrackerTrans"/>
	    <Draggable/>
	</Image>
	<Attractor Target="TrackerTrans.XY" ux:Name="TheAttractor" Unit="Normalized"/>

	  <WhileTrue Value="{reposition}">
          <Set Target="TheAttractor.Value" Value="-1,0"/>
      </WhileTrue>


</App>