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.
Mobile Web has been deprecated and will be removed in fixVersion 7.0.0.