Poignée cliquez et faites glisser le mouvement pour faire défiler horizontalement avec mootools ou jquery

Est-il un moyen facile de gérer le mouvement de l'événement composé de cliquez et faites glisser vers la gauche ou vers la droite sur une div, dans le but de faire un classique curseur.
L'idée est de faire quelque chose de similaire pour le défilement des applications de l'iphone, mais avec le clic gauche de la souris.

merci pour de l'édition de @Nicolás

OriginalL'auteur Agorilla | 2011-04-23

  1. 11

    Vous dire quelque chose dans ce style?

    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/

    Cliquez à l'intérieur de la zone et faites-le glisser pour déplacer l'élément div. C'est rapide et sale, mais si c'était ce que vous étiez en ce sens, c'est un bon point de départ. Sauf si il y a un plugin existant quelque part.

    OriginalL'auteur James Montagne

  3. 0

    ES6/version Vanilla JS de 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);
});

    OriginalL'auteur Ives.me