jQuery的 - 移动元素向左或向右条件

Question

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

2容器内的各种盒子，总是500px 100px，生病'插入一些箱子100px X 100px，再加上两个控制按钮将容器移动到100px的右边或左边。

框可见5例如，如果有8我想单击按钮'右'容器2会移动100px，但是当他们到达最后一个块（在这个例子中是8）按钮去到右侧必须禁用。相反，如果我们向左启动按钮，Go必须被禁用，直到右侧完成至少一次移动。

另外，正如您在点击时看到的那样，当我移动包含在包装盒中的元素时，它会在移动过程中消失，并且这件事情不好，各种包装箱必须移动但始终保持可见状态。

关于JSfiddle我创建了一个演示，我无法创建正确的条件，您有解决方案吗？感谢

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