这听起来像是重复的,但请听我说,因为我需要一个具体的答案。
我正在创建需要在用户拖动时在视觉上改变的UI - 而不是完整的。我已经发现如何确定我们是否根据数组中的选定项偏移左侧位置向左或向右移动以及如何在从该位置向右移动时确定指针的位置并且能够给出视觉反馈就好了。现在我也知道如何确定我们是否从数组中偏移左侧位置的所选项目向左移动,如何确定我移动指针的距离是多少?我几个小时都在苦苦挣扎。
以下是我到目前为止的总结:
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);
}
}
}