StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to determine the current pointer x position in MSGestureChange event?
text
Body
copied!<p>This may sound like a duplicate, but please hear me out as I need a specific answer.</p> <p>I am creating UI that needs to visually change <b>while</b> the user is dragging - not on complete. I've discovered how to determine if we've moved left or right based upon a selected item offset left position in an array and how to determine the position of the pointer while moving right from that position and am able the give visual feedback just fine. Now that I also know how to determine if we're moving left from the selected item offset left position in the array, how do I determine how far left I'm moving the pointer? I've been struggling with this for hours.</p> <p>Here's a summary of what I have so far:</p> <pre><code>var ActiveElement = null; function init() { touchElement.msg = new MSGesture(); touchElement.msg.target = touchElement; touchElement.addEventListener("MSGestureStart", te_gs, false); touchElement.addEventListener("MSGestureChange", te_gc, false); touchElement.addEventListener("MSGestureEnd", te_ge, false); touchElement.addEventListener("MSInertiaStart", te_is, false); touchElement.addEventListener("MSPointerDown", te_pd, false); touchElement.addEventListener("MSPointerUp", te_pu, false); touchElement.addEventListener("MSGestureTap", te_click, false); }; //************************************************************************************************************************ // POINTER DOWN //************************************************************************************************************************ function te_pd(e) { //get activeel pos ActiveElement.pos = getElPos(ActiveElement); var touchE = e.currentTarget; touchE.msg.addPointer(e.pointerId); } //************************************************************************************************************************ // GESTURE START //************************************************************************************************************************ function te_gs(e) { // set touchElement to the widget var touchE = e.currentTarget; // track the location from the start touchE.diffx = ActiveElement.offsetLeft - e.clientX; } //************************************************************************************************************************ // GESTURE CHANGE //************************************************************************************************************************ function te_gc(e) { var touchE = e.currentTarget; var activeElementLeftEdge = listArray[ActiveElement.pos].offsetLeft - listArray[ActiveElement.pos - 1].offsetLeft; var dragRight = e.translationX > ActiveElement.offsetLeft - e.clientX; var dragLeft = e.translationX < ActiveElement.offsetLeft - e.clientX; if (dragRight) { // I'm doing stuff to the right here where activeElementLeftEdge helps me determine the current location of the pointer going to the right // my problem is that I don't know how to determine the equivalent when moving left if (activeElementLeftEdge > listArray[ActiveElement.pos - 1].offsetLeft * 0) { // show state } else if (activeElementLeftEdge < 100) { // hide state } if (activeElementLeftEdge > 200) { // show next state } else if (activeElementLeftEdge < 200) { // hide state } } if (dragLeft) { // How do I determine the x position of the pointer here? } } //************************************************************************************************************************ // GESTURE END //************************************************************************************************************************ function te_ge(e) { } //************************************************************************************************************************ // POINTER UP //************************************************************************************************************************ function te_pu(e) { } //************************************************************************************************************************ // INERTIA STARTING //************************************************************************************************************************ function te_is(e) { } //************************************************************************************************************************ // CLICKED //************************************************************************************************************************ function te_click(e) { } //************************************************************************************************************************ //returns the element position in the listArray //************************************************************************************************************************ function getElPos(element) { //loop through the array for (i = 0; i < listArray.length; i++) { if (listArray[i].id == element.id) { return (i); } } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload