javascript - 如何滑动或移动这组 Div

Question

我有一组七个 div，具有以下属性:

height: 100px;
width: 100px;
display: inline-block;

我有一个包含这七个 block 的包装器 div，只有足够的空间容纳四个并进行更改。

溢出是隐藏的。

如何实现这个功能，当你在手机上点击并水平拖动，或者用手指滑动时，整行的div block 都会滑动显示之前隐藏的？

请引用this jsFiddle for the example .

我们可以在这里使用css或者jQuery。

*奖励，在容器边缘显示完全隐藏的部分 div。

Answer 1

根据 jfriend00 的回答，我对此进行了修改，使其可以在触摸/单击和使用鼠标移动时使用。

var last_x = null;
var holding = false;
//Mark the wrapper as clicked/touched
$('.wrapper').mousedown(function(){
    holding=true;
});
//We do this on document so that even if movement goes outside of the container the event will fire
$(document).mouseup(function(){
    holding=false;
});

$('.wrapper').mousemove(function(e){
    if(last_x === null || !holding) //If this is the first movement
    {
        last_x = e.pageX;
        return;
    }
    var ammount = e.pageX - last_x;
    $('.slider',this).css('margin-left', '+=' + ammount);
    last_x = e.pageX;
});

其工作原理的要点是，当在容器上检测到 mousedown 事件时，脚本开始跟踪所有鼠标移动并使用鼠标移动内容。释放鼠标时，它会停止跟踪移动。

fiddle :http://jsfiddle.net/NvJam/2/