重複しているように聞こえるかもしれませんが、具体的な回答が必要なので、聞いてください。
ユーザーがドラッグしている間に視覚的に変更する必要がある 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);
}
}
}