1

这听起来像是重复的，但请听我说，因为我需要一个具体的答案。

我正在创建需要在用户拖动时进行视觉更改的 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);
        }
    }
}
4

0 回答 0