Управляйте движением мыши и перетаскиванием для горизонтальной прокрутки с помощью mootools или jquery. - PullRequest
Новая
       30

Управляйте движением мыши и перетаскиванием для горизонтальной прокрутки с помощью mootools или jquery.

6 голосов
/ 23 апреля 2011

Существует ли простой способ обработки события движения, состоящего из щелчка и перетаскивания влево или вправо на элементе div для создания классического слайдера.
Идея состоит в том, чтобы сделать что-то похожее на прокруткуприложений для iphone, но левой кнопкой мыши.

Ответы [ 3 ]

12 голосов
/ 30 апреля 2011

Ты имеешь в виду что-то вроде этого? 

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/

Нажмите внутри области и перетащите, чтобы перемещаться по div. Это быстро и грязно, но если это было то, что вы имели в виду, это хорошая отправная точка. Если нет где-нибудь существующего плагина.

0 голосов
/ 27 ноября 2018

версия ES6 / Vanilla JS 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);
});
0 голосов
/ 07 июня 2013

Привет, друг, зацени это, я думаю, это решит твою проблему http://www.axure.com/forum/support-axure-com-collection/4418-answered-how-make-scrolling-page-scrollable-content-scroll-dynamic-panel-dragging-scrollbars-vertical-horizontal-drag-ondrag.html и это также http://mootools.net/demos/?demo=Drag.ScrollЯ думаю, что это вам очень поможет http://dragon.deparadox.com/

...