Wie erstelle ich ein horizontales Schiebemodul? Beispielcode für Schiebeereignisse von Webseitenelementen

Wir müssen noch ein paar Dinge erledigen, bevor wir diese Methode herausfinden können. Derzeit haben wir Touch-Gesten und Mausziehen implementiert.

function addSlide(element, options) {
    // Validate arguments...
    // Resolve element...
    // Touch supports...
    // Mouse supports...
 
    // ToDo: Implement it.
    return null;
}

Befassen wir uns nun mit dem Rückgabewert. Dabei handelt es sich um ein Objekt, das Methoden enthält, mit denen die Registrierung von Wischereignissen aufgehoben werden kann.

return {
    dispose: function () {
        // Remove touch events.
        ele.removeEventListener("touchstart", touchStart, false);
        if (!!touchMove)
            ele.removeEventListener("touchmove", touchMove, false);
        ele.removeEventListener("touchend", touchEnd, false);
 
        // Remove mouse event.
        ele.removeEventListener("mousedown", mouseDown, false);
    }
};

Jetzt sind Sie fertig! Werfen wir einen Blick auf den endgültigen Code.

/**
  * Adds gesture handlers.
  * @param element  the target element.
  * @param options  the options.
  */
function addSlide(element, options) {
    if (!options || !element) return {
        dispose: function () { }
    };
 
    // Get the element.
    var ele = !!element && typeof element === "string" ? document.getElementById(element) : element;
    if (!ele) return {
        dispose: function () { }
    };
 
    // Get the minimum moving distances.
    var minX = options.minX;
    var minY = options.minY;
    if (minX == null || minX < 0) minX = 1;
    minX = Math.abs(minX);
    if (minY == null || minY < 0) minY = 1;
    minY = Math.abs(minY);
 
    // The handler occured after moving.
    var moved = function (x, y) {
        var isX = !y || (Math.abs(x) / Math.abs(y)
            > (minX + 0.01) / (minY + 0.01));
        if (isX) {
            if (x > minX && !!options.turnLeft)
                options.turnLeft(ele, x);
            else if (x < -minX && !!options.turnRight)
                options.turnRight(ele, -x);
        } else {
            if (y > minY && !!options.turnUp)
                options.turnUp(ele, y);
            else if (y < -minY && !!options.turnDown)
                options.turnDown(ele, -y);
        }
 
        if (!!options.moveEnd)
            options.moveEnd(ele, x, y);
    };
 
    // Touch starting event handler.
    var start = null;
    var touchStart = function (ev) {
        start = {
            x: ev.targetTouches[0].pageX,
            y: ev.targetTouches[0].pageY
 
        };
        if (!!options.moveStart)
            options.moveStart(ele);
    };
    ele.addEventListener("touchstart", touchStart, false);
 
    // Touch moving event handler.
    var touchMove = !!options.moving
        ? function (ev) {
            var point = ev.touches ? ev.touches[0] : ev;
            if (!point) return;
            var coor = {
                x: point.pageX - start.x,
                y: point.pageY - start.y
            };
            options.moving(ele, coor.x, coor.y);
        }
        : null;
    if (!!touchMove)
        ele.addEventListener("touchmove", touchMove, false);
 
    // Touch ending event handler.
    var touchEnd = function (ev) {
        if (start == null) return;
        var x = ev.changedTouches[0].pageX - start.x;
        var y = ev.changedTouches[0].pageY - start.y;
        start = null;
        moved(x, y);
    };
    ele.addEventListener("touchend", touchEnd, false);
 
    // Mouse event handler.
    var mouseDown = function (ev) {
        // Record current mouse position
        // when mouse down.
        var mStartP = getMousePosition();
 
        // Mouse moving event handler.
        var mouseMove = function (ev) {
            var mCurP = getMousePosition();
            var x = mCurP.x - mStartP.x;
            var y = mCurP.y - mStartP.y;
            options.moving(ele, x, y);
        };
        document.body.addEventListener("mousemove", mouseMove, false);
 
        // Mouse up event handler.
        // Need remove all mouse event handlers.
        var mouseUpHandlers = [];
        var mouseUp = function (ev) {
            mouseUpHandlers.forEach(function (h, hi, ha) {
                h(ev);
            });
        };
        mouseUpHandlers.push(
            function () {
                document.body.removeEventListener("mousemove", mouseMove, false);
            },
            function () {
                document.body.removeEventListener("mouseup", mouseUp, false);
            },
            function (ev) {
                var mCurP = getMousePosition();
                var x = mCurP.x - mStartP.x;
                var y = mCurP.y - mStartP.y;
                moved(x, y);
            }
        );
        document.body.addEventListener("mouseup", mouseUp, false);
    };
    ele.addEventListener("mousedown", mouseDown, false);
 
    // Return a disposable object
    // for removing all event handlers.
    return {
        dispose: function () {
            // Remove touch events.
            ele.removeEventListener("touchstart", touchStart, false);
            if (!!touchMove)
                ele.removeEventListener("touchmove", touchMove, false);
            ele.removeEventListener("touchend", touchEnd, false);
 
            // Remove mouse event.
            ele.removeEventListener("mousedown", mouseDown, false);
        }
    };
}

Jetzt machen wir einen Test. Angenommen, es gibt ein DOM-Element wie dieses.

<p id="demo_gesture">
    <p id="demo_gesture_fore">
          
    </p>
</p>

Die Stile sind wie folgt.

#demo_gesture {
    max-width: 800px;
    height: 20px;
    background-color: #EEE;
    border: 1px solid #CCC;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
#demo_gesture > #demo_gesture_fore {
    color: #CCC;
    text-align: center;
    width: 20px;
    height: 20px;
    background-color: #CCC;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    cursor: pointer;
}

Wenn das Dokumentelement geladen wird, führen wir den folgenden Code aus.

var adjustPosition = function (ele, x) {
    x = (ele.position || 0) + x;
    if (x < 0)
        x = 0;
    else if (x > ele.parentElement.offsetWidth - ele.offsetWidth)
        x = ele.parentElement.offsetWidth - ele.offsetWidth;
    ele.style.left = x + "px";
    return x;
};
addSlide("demo_gesture_fore", {
    moving: function (ele, pos) {
        adjustPosition(ele, pos.x);
    },
    moveEnd: function (ele, pos) {
        ele.position = adjustPosition(ele, pos.x);
    }
});

Studenten, die CSS lernen müssen, achten bitte auf die chinesische PHP-Website CSS-Video-Tutorials. Viele CSS-Online-Video-Tutorials können kostenlos angesehen werden!

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein horizontales Schiebemodul? Beispielcode für Schiebeereignisse von Webseitenelementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!