Javascript 如何滑动或移动这组div

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

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

我有一个包含这七个块的包装器div，它的空间只够容纳四个和零钱

溢出的水是隐藏的

我如何使这个功能，使当你点击并水平拖动，或用手指在手机上滑动时，整行div块将滑动以显示以前隐藏的块

请参阅

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

*另外，在容器边缘显示完全隐藏的div的分数。

---

您可以放置一个额外的容器div，并在该div上使用绝对定位来向左/向右移动项目。下面是一个演示：

HTML如下所示：

<div class="wrapper">
    <div class="slider">
        <div class="first">First</div>
        <div class="second">Second</div>
        <div class="third">Third</div>
        <div class="fourth">Fourth</div>
        <div class="fifth">Fifth</div>
        <div class="sixth">Sixth</div>
        <div class="seventh">Seventh</div>
    </div>
</div>

---

可以为触摸事件连接类似的内容。

您可以放置一个额外的容器div，并在该div上使用绝对定位来向左/向右移动项目。下面是一个演示：

HTML如下所示：

<div class="wrapper">
    <div class="slider">
        <div class="first">First</div>
        <div class="second">Second</div>
        <div class="third">Third</div>
        <div class="fourth">Fourth</div>
        <div class="fifth">Fifth</div>
        <div class="sixth">Sixth</div>
        <div class="seventh">Seventh</div>
    </div>
</div>

---

类似的东西可以连接到触摸事件上。

根据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:

根据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:

更好的解决方案：使用JQuery UI拖动：

$('.slider').draggable({
    axis: 'x',
});

---

更好的解决方案：使用JQuery UI Dragable：

$('.slider').draggable({
    axis: 'x',
});

---

由于没有人提到，我将补充以下内容：

<div class="carousel">
    <div class="wrapper">
        <div class="first">First</div>
        <div class="second">Second</div>
        <div class="third">Third</div>
        <div class="fourth">Fourth</div>
        <div class="fifth">Fifth</div>
        <div class="sixth">Sixth</div>
        <div class="seventh">Seventh</div>
    </div>
</div>


$('.carousel').kinetic();

弗斯特
第二
第三
第四
第五
第六
第七
$（'.carousel'）.kinetic（）；

---

演示：

由于没有人提到，我将添加以下内容：

<div class="carousel">
    <div class="wrapper">
        <div class="first">First</div>
        <div class="second">Second</div>
        <div class="third">Third</div>
        <div class="fourth">Fourth</div>
        <div class="fifth">Fifth</div>
        <div class="sixth">Sixth</div>
        <div class="seventh">Seventh</div>
    </div>
</div>


$('.carousel').kinetic();

弗斯特
第二
第三
第四
第五
第六
第七
$（'.carousel'）.kinetic（）；

---

---

演示：

我愿意尝试任何东西，但我真的不知道从哪里开始。我认为这必须是某种jQuery方法，才能使div在包装容器中移动。请尝试jQuery.kinetic for this@louisbros，这正是我想要的。请发布一个答案，以便其他用户也可以了解这一点！我添加了它作为一个答案：）我愿意尝试任何东西，但我真的不知道从哪里开始。我认为这必须是某种jQuery方法，才能使div在包装容器中移动。尝试jQuery.Dynamic对于这个@louisbros，这正是我所要寻找的。请发布一个答案，以便其他用户也可以了解这一点！我添加了它作为答案：）很好，这解决了奖金问题。你知道我如何将这些div左右移动到容器的边缘吗？很好，这解决了奖金问题。你知道我如何将这些div左右移动到容器的边缘吗？我想OP是在试图修改这些div上的拖动概念。是的，我是，但这是我学习+1的完美起点。除了按钮外，你知道如何用鼠标拖动吗？我想某种插件可以解决这个问题，或者是简单的jQuery？一旦到达容器的边缘，限制移动又如何？但是，我想我知道从哪里开始寻找这些答案。非常感谢你的帮助！我认为OP试图修正那些div上的拖拽概念。是的，但这是我学习+1的完美起点。除了按钮外，你知道如何用鼠标拖动吗？我想某种插件可以解决这个问题，或者是简单的jQuery？一旦到达容器的边缘，限制移动又如何？但是，我想我知道从哪里开始寻找这些答案。非常感谢你的帮助！非常感谢！我认为最完美的答案是路易斯布罗斯，不过，看看问题下面的评论吧！看起来就是那个！我认为必须有一个插件来实现这一点，因为这是一个常见的需求，但我不知道它可能是什么。很高兴找到路易斯布罗斯。非常感谢你！我认为最完美的答案是路易斯布罗斯，不过，看看问题下面的评论吧！看起来就是那个！我认为必须有一个插件来实现这一点，因为这是一个常见的需求，但我不知道它可能是什么。很好，找到路易斯布罗斯。这是最好最简单的解决方案。我喜欢div到达容器末端后停止的方式。明亮的谢谢你的回答！在演示中很难看到，但您也可以“抛出”div，使其在鼠标移动后继续移动。这是最好、最简单的解决方案。我喜欢div到达容器末端后停止的方式。明亮的谢谢你的回答！这很难在演示中看到，但你也可以“抛出”div，这样它在鼠标移动后会继续移动