Jquery - 根据条件向左或向右移动元素

Question

大家好，我解释一下我的问题， 我创建了一个 500px 宽和 100px 高的主容器（隐藏溢出）...

在各种盒子的容器 2 内，总是 500px 100px，我会插入一些 100px X 100px 的盒子，外加两个控制按钮来将容器移动到 100px 的右侧或左侧。

这些框是可见的 5，例如，如果有 8 个我想单击“右”按钮，容器 2 将移动 100px，但是当它们到达最后一个块（在本例中为 8）时，按钮转到权利必须禁用。 反之，如果我们启动左边的 Go 按钮，则必须禁用，直到右边至少完成一次移动。

正如您在单击时看到的，当我移动框中包含的元素时，它会在移动过程中消失，这不好，各种框必须移动但始终保持可见。

我在JSfiddle上创建了一个demo，无法创建合适的条件，你有解决办法吗？谢谢

enter link description here

$( "#right" ).click(function() {
  $( "#block" ).animate({ "left": "+=105px" }, "slow" );
    
});
 
$( "#left" ).click(function(){
  $( "#block" ).animate({ "left": "-=105px" }, "slow" );
});

.cont{
    width:530px;
    height:100px;
    position:absolute;
    background:#000;
    overflow:hidden;
}
.box-cont{
    width:auto;
    height:100px;
    position:absolute;
    background:yellow;
   
}
.box{
    width:100px;
    height:100px;
    position:relative;
    float:left;
    margin-left:5px;
    background:#F00;
    text-align:center;
    font-size:32px;
}
.btn{

    position:absolute;
    left:0px;
    top:120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="cont">
  
    

    <div class="box-cont" id="block">
        
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        
    </div>
    
    
</div>

<div class="btn">
    <button id="left">&laquo;</button>
    <button id="right">&raquo;</button>
</div>

Answer 1

你可以这样使用：

<script>

    var totalBlocks         = $('#block div.box').length;
    var blockViews          = Math.round($('#block').width() / $('#block div.box').width());
    var currentPosition     = 0;

    $( "#right" ).click(function() {

        if(currentPosition > 0)
        {
            $( "#block" ).animate({ "left": "+=105px" }, "slow" );
            currentPosition--;
        }
    });

    $( "#left" ).click(function(){
        if(blockViews + (currentPosition+1) <= totalBlocks)
        {   
            $( "#block" ).animate({ "left": "-=105px" }, "slow" );
            currentPosition++;
      }
    });
</script>

Answer 2

看看这个，有帮助吗？您可以拖动和移动元素本身，并在它们上设置左右阈值。我试图模仿谷歌 gmail 滑动 http://jsfiddle.net/williamhowley/o9uvo50y/

 $('ul#main > li')
.on('movestart', function (e) {
    console.log("move start");

    // var $li = $(e.target).closest('.swipable'); // this would be normal live integration
    var $li = $(e.target);
    if ($li.attr("data-hasplaceholder") !== "true") { // if it does not have a placeholder, add one.
        createBackgroundSpacer($li);
        $li.attr("data-hasplaceholder", true); // signify that a placeholder has been created for this element already. 
    }

    // If the movestart heads off in a upwards or downwards
    // direction, prevent it so that the browser scrolls normally.
    if ((e.distX > e.distY && e.distX < -e.distY) ||
        (e.distX < e.distY && e.distX > -e.distY)) {
        e.preventDefault();
        return;
    }

    // To allow the slide to keep step with the finger,
    // temporarily disable transitions.
    wrap.addClass('notransition'); // add this to the container wrapper. 
})
.on('move', function (e) {
    // event definitions
    // startX : 184, where from left the mouse curser started.
    // deltaX: ?
    // distX: how far the mouse has moved, if negative moving left. Still need to account for double movement, currently can only handle one movement. 

    console.log("move");
    console.log(e);

    var maxLeft = $('.rightContent').width();
    var marginLeftNum = Number($(this).css('margin-left').replace(/[^-\d\.]/g, ''));

    if (marginLeftNum <= -maxLeft && e.deltaX < 0) { // Case when user is at outermost left threshold, and trying to move farther left.  
        $(this).css({ 'margin-left': -maxLeft });
    }
    else if (marginLeftNum == -maxLeft && e.deltaX > 0) { // When user is at threshold, and trying to move back right. 
        $(this).css({ 'margin-left': marginLeftNum + e.deltaX });
    }
    else if (e.target.offsetLeft>=0 && e.deltaX>0) { // If the offset is 0 or more, and the user is scrolling right (which is a positive delta, than limit the element. )
        $(this).css({ 'margin-left': 0 });
    }
     // Must have a Negative offset, and e.deltaX is Negative so it is moving left. 
    else if (e.deltaX < 0) { // Case when element is at 0, and mouse movement is going left. 
        $(this).css({ 'margin-left': marginLeftNum + e.deltaX }); 
    }
    else {  // Moving Right when not on 0
        $(this).css({ 'margin-left': marginLeftNum + e.deltaX });
    }



})
.on('swipeleft', function (e) {
    console.log("swipeleft");
})
.on('activate', function (e) {
    // not seeing this activate go off, i think this is custom function we can add on if swipe left hits a threshold or something. 
    console.log("activate");
})
.on('moveend', function (e) {
    console.log("move end");
    wrap.removeClass('notransition');
 });