[TIMOB-1277] Touchmove not tracking properly

GitHub Issue	n/a
Type	Bug
Priority	Trivial
Status	Closed
Resolution	Invalid
Resolution Date	2012-06-22T12:57:03.000+0000
Affected Version/s	n/a
Fix Version/s	Sprint 2012-13 API
Components	iOS
Labels	api
Reporter	Tony Masciola
Assignee	Vishal Duggal
Created	2011-04-15T02:48:20.000+0000
Updated	2017-05-30T17:28:21.000+0000

Description

Code similar to the following used to work fine, prior to 1.4 RC1:

http://developer.appcelerator.com/question/28951/to-drag-and-drop-or-not"> http://developer.appcelerator.com/question/28951/to-drag-and-drop-o...

The object would move with the touchmove coordinates and, although at times a bit laggy, would move right along from the touchstart coordinates to touchend. Now it's as if there are multiple events being fired with varying coordinates because the object jumps all over the screen and falls behind as you "drag" the object in a straight line from one point to another.

Or take a more straight-forward example like this to see how the object tracks behind the current touch position and never catches up:

//Box is a box to be dragged (I've tested with an imageview and label with same result) box.addEventListener("touchmove", function(e){

   e.source.center = {x:e.x,y:e.y};

});

Comments

Tony Masciola 2011-04-15

Sorry, formatting problem on the code:

   //Box is a box to be dragged (I've tested with an imageview and label with same result) 
   box.addEventListener("touchmove", function(e){
      e.source.center = {x:e.x,y:e.y};
   });

daniyal 2011-04-15

Encountering the same issue with touchmove event on a View object.
Stephen Tramer 2011-04-15

Still valid; can be seen in KS->Base UI->Animations when you try and drag the circle.
Jeff Haynie 2011-04-28

this was assigned to me but should go to someone else

Giuseppe Mastrangelo 2011-09-24

I have the same problem with Android and solved it. Modify the file android/titanium/src/org/appcelerator/titanium/view/TiUIView.java change the function dictFromEvent with this one:

        
           private KrollDict dictFromEvent(MotionEvent e)
           {
                   KrollDict data = new KrollDict();
                   /* original...
                   data.put(TiC.EVENT_PROPERTY_X, (double)e.getX());
                   data.put(TiC.EVENT_PROPERTY_Y, (double)e.getY());
                   */
                   data.put(TiC.EVENT_PROPERTY_X, (double)e.getRawX());
                   data.put(TiC.EVENT_PROPERTY_Y, (double)e.getRawY());
                   data.put(TiC.EVENT_PROPERTY_SOURCE, proxy);
                   return data;
           }

Now you can execute a simple test app:

   // Just past me into into a blank app.js file and run
   window = Titanium.UI.createWindow({
       backgroundColor:'#47a',
       exitOnClose: true
   });
   
   var image = Titanium.UI.createView({
      backgroundColor:'#f00',
      borderRadius:50,
      height:100,
      width:100,
      left:100,
      top:100
   });
   
   var debugLabel = Titanium.UI.createLabel({
   	left:0,
   	top:0,
   	color:'#fff',
   	text:''
   });
   window.add(debugLabel);
    
   //make the image dragable
   image.addEventListener('touchstart', function (e) {
   	debugLabel.text = "TOUCHSTART "+JSON.stringify(e);
   });
   image.addEventListener('touchmove', function (e) {
   	debugLabel.text = JSON.stringify(e);
   	image.center = {
   		x:e.x,
   		y:e.y
   	};
   });
   
   image.addEventListener('touchend', function (e) {
   	debugLabel.text = "TOUCHEND "+JSON.stringify(e);
   }); 
   
   window.add(image);
   window.open({fullscreen:true});

CK Ng 2012-03-14

Based on the tests on a lot of drag and drop codes, this problem arises for me when a layout property is defined in the parent view. The touchmove coordinates works fine when the parent view's layout is not defined. When there is a 'horizontal' or 'vertical' layout, the touchmove corrdinates are 'jumping' around. The same problem persists when using convertPointToView as well.

Vishal Duggal 2012-06-22

convert to window co-ordinates

   image.addEventListener('touchmove', function (e) {
       debugLabel.text = "TOUCHMOVE "+JSON.stringify(e);
       var p = {x:e.x,y:e.y};
       var convertPoint = image.convertPointToView(p,window);
       image.center = convertPoint;
   });

JSON Source