Problem Description
A simple draggable view, using the "touchmove" event, results in incorrect or erratic values in the event object x and y positions. When setting the view to the new position, based of the finger movement, it will appear to "jump" as the values are not sequential in nature. For example, dragging and item to the right might return x values of 1, 2, 5, 4, 6, 7, 9, 8, 11, 10, etc. C
Steps to reproduce
1. Create a new mobile project
2. Paste this code into app.js:
var index = Ti.UI.createWindow({backgroundColor:'black'});
var view = Ti.UI.createView({backgroundColor:'white'});
index.add(view);
index.addEventListener('postlayout', onWindowReady);
var baseHeight; //Original Height of View
var baseWidth;// Original Width of View
var startX; //1st touch x
var startY; //1st touch y
var lastX; //last touch x
var lastY; //last touch y
var imageX; //x position of view at start
var imageY; //y position of view at start
function onViewPinch(e) {
view.height = baseHeight * e.scale;
view.width = baseWidth * e.scale;
}
function onViewTouchStart(e) {
baseHeight = view.height;
baseWidth = view.width;
var rect = view.rect;
imageX = rect.x;
imageY = rect.y;
lastX = startX = e.x;
lastY = startY = e.y;
Ti.API.log("onImageTouchStart => " + startX + ", " + startY);
}
function onViewTouchMove(e) {
Ti.API.log("onImageMove Delta Last=> " + (e.x - lastX) + ", " + (e.y - lastY));
Ti.API.log("onImageMove E Values => " + (e.x) + ", " + (e.y));
lastX = e.x;
lastY = e.y;
var deltaX = e.x - startX;
var deltaY = e.y - startY;
view.left = imageX + deltaX;
view.top = imageY + deltaY;
}
function onViewTouchEnd(e) {
Ti.API.log("onViewTouchEnd Delta Last=> " + (e.x - lastX) + ", " + (e.y - lastY));
Ti.API.log("onViewTouchEnd E Values => " + (e.x) + ", " + (e.y));
var deltaX = e.x - startX;
var deltaY = e.y - startY;
view.left = imageX + deltaX;
view.top = imageY + deltaY;
}
function onWindowReady(e) {
Ti.API.log("onWindowReady");
index.removeEventListener('postlayout', onWindowReady);
view.addEventListener('pinch', onViewPinch);
view.addEventListener('touchstart', onViewTouchStart);
view.addEventListener('touchmove', onViewTouchMove);
view.addEventListener('touchend', onViewTouchEnd);
}
index.open();
3. Run into device
4. Go with your finger moving to the upper left corner or the device, or down to the right lower corner.
5. You will see the jumping black square, even if that should happen softly.
Issue exist with 3.1.4 but can't reproduce on 3.4.0 Appcelerator Studio, build: 3.3.0.201407111535 TiSDK 3.4.0 iOS : 7.0 Titanium Command-Line Interface, CLI version 3.3.0
Tested and reopened. The issue is still reproducible with Mac osx 10.9.5 Mavericks Appcelerator Studio, build: 3.4.0.201409161950 Titanium SDK, build: 3.4.0.v20140922135716 acs@1.0.16 alloy 1.5.0-rc2 install@0.1.7 npm@1.4.23 sudo@1.0.3 titanium 3.4.0-rc4 titanium-code-processor@1.1.1 Xcode6.0.1 (6A317) Devices: iPhone 6 iOS 8 iPhone 6+ iOS 8 iPhone5 iOS 8