Griff klicken und ziehen Bewegung, um horizontal zu scrollen mit mootools oder jquery

Gibt es einen einfachen Weg zu handle die Bewegung-Ereignis aus, klicken Sie und ziehen Sie nach Links oder rechts auf ein div, um einen klassischen slider.
Die Idee ist, etwas ähnliches zu tun, um das scrollen der apps auf dem iphone, sondern mit der linken Maustaste aus.

vielen Dank für de Bearbeitung @Nicolás

InformationsquelleAutor Agorilla | 2011-04-23

  1. 11

    Meinst du etwas wie das?

    var x,y,top,left,down;

$("#stuff").mousedown(function(e){
    e.preventDefault();
    down = true;
    x = e.pageX;
    y = e.pageY;
    top = $(this).scrollTop();
    left = $(this).scrollLeft();
});

$("body").mousemove(function(e){
    if(down){
        var newX = e.pageX;
        var newY = e.pageY;

        $("#stuff").scrollTop(top - newY + y);    
        $("#stuff").scrollLeft(left - newX + x);    
    }
});

$("body").mouseup(function(e){down = false;});

    http://jsfiddle.net/AhC87/2/

    Klicken Sie im Bereich, und ziehen bewegen Sie sich über die div. Es ist quick and dirty, aber wenn es das war, was Sie waren, was bedeutet, es ist ein guter Ausgangspunkt. Es sei denn, es gibt ein plugin irgendwo.

    InformationsquelleAutor James Montagne

  3. 0

    ES6 version/Vanilla JS von https://stackoverflow.com/a/5839943/145122

    let el = document.querySelector("#yourhtmlelement");
let x = 0, y = 0, top = 0, left = 0;

let draggingFunction = (e) => {
    document.addEventListener('mouseup', () => {
        document.removeEventListener("mousemove", draggingFunction);
    });

    el.scrollLeft = left - e.pageX + x;
    el.scrollTop = top - e.pageY + y;
};

el.addEventListener('mousedown', (e) => {
    e.preventDefault();

    y = e.pageY;
    x = e.pageX;
    top = el.scrollTop;
    left = el.scrollLeft;

    document.addEventListener('mousemove', draggingFunction);
});

    InformationsquelleAutor Ives.me

Schreibe einen Kommentar