logo标签列表

使用MooTools或jQuery处理点击和拖动滚动水平移动的操作

jquerymootoolsclickscrolldrag
11

有没有一种简单的方法来处理由在div上单击和拖动而形成的移动事件，以便做一个经典的滑块。
这个想法是做类似于iPhone应用程序滚动但使用鼠标左键。

感谢 @Nicolás 的编辑。 - Agorilla
3个回答
21

你的意思是类似这样吗？

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

点击区域并拖动以移动div。这是一个简单而快速的方法，但如果这正是您想要的，那么这是一个很好的起点。除非已经存在一个插件。

6

这是一个关于ES6版本和原生JavaScript实现https://dev59.com/XW025IYBdhLWcg3w1ZoL#5839943的问题。

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);
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接