Reposition element after that is draggable

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?



	var Observable = require("FuseJS/Observable");
	var reposition=Observable(false);
	function newposition(args){

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

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