How to create a horizontal sliding module? Sliding event Instance code for page elements

We still need to do something to get this method done. Currently, we have implemented touch gestures and mouse drag.

function addslide (element, options) {    //Validate arguments ...    Resolve element    ... Touch supports    ... Mouse supports     ... Todo:implement it.    return null;}

Now let's deal with the return value. This will be an object that contains a method that can unregister the slide event.

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);    };

At this point, it's done! Let's take a look at the final 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//if 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, FA            LSE);            }, 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); }    };}

Now let's take a test. Suppose there is such a DOM element.

<p id= "Demo_gesture" >    <p id= "Demo_gesture_fore" >         &nbsp;    </p></p>

The style is as follows.

#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;}

When the document element has finished loading, we execute the following code.

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);    }});

Students who need to learn CSS, please pay attention to the PHP Chinese web CSS video tutorial, many CSS online video tutorials can be viewed for free!