停止圖像移動太遠導航

Question

我創建此codepen使城市導航dragabble和箭頭導航，它的工作在兩個方向（左和右），但我需要找到一種方法來阻止，當它到達圖像的結束

如果有人可以給我一個關於光將是巨大的 感謝

http://codepen.io/eloisemonteiro/pen/gPzovO

HTML：

<div class="row"> 
    <div class="large-12 columns"> 

    <span class='leftArrow button secondary' id="left" value='left'><i class="fa fa-chevron-left fa-lg"></i></span> 
    <span class='rightArrow button secondary' id="right" value='right'><i class="fa fa-chevron-right fa-lg"></i></span> 
    <span class='topArrow button secondary' id="top" value='top'><i class="fa fa-chevron-up fa-lg"></i></span> 
    <span class='bottomArrow button secondary' id="bottom" value='bottom'><i class="fa fa-chevron-down fa-lg"></i></span> 

    <div class="wrapper-general"> 

     <div id="wrapper"> 
     <div id="parent"> 

      <div id="div1"> 

      </div> 

     </div> 
     </div> 

    </div> 

    </div> 
</div> 

個

JS：

$(document).foundation(); 

    wrapper = $("#wrapper"), 
    parent = $("#parent"), 
    div1 = $("#div1"), 
    childX = $("#childX"), 
    childY = $("#childY"); 

    //set wrapper perspective 
    TweenLite.set(wrapper, { 
    perspective: 500 
    }); 


    /** draggable instance **/ 

    Draggable.create(div1, { 
    type: 'x,y', 
    bounds: parent, 
    edgeResistance: 1, 
    onDrag: function() { 
     childX.html(this.x); 
     childY.html(this.y); 
    } 
    }); 
    Draggable.get("#div1").vars.cursor = "grabbing"; //or whatever 

    $(function() { 

     $("#right, #left").click(function() { 
      var dir = this.id == "right" ? '+=' : '-='; 
      var wid = $("#div1").width(); 
      TweenLite.to("#div1", 2, {x:dir + -wid/2}) 
     }); 

    }); 

CSS：

body{ 
    height: 100%; 
    width: 100%; 
    } 
    .row { 
     width: 100%; 
     margin: 0px auto; 
     max-width: 100%; 
     height: 100%; 
    } 
    .column, .columns { 
     position: relative; 
     padding-left: 0em; 
     padding-right: 0em; 
     float: left; 
     height: 100%; 
     width: 100%; 
    } 

#wrapper { 
    width: 100%; 
    height: 100%; 
    right: 0%; 
    top:0%; 
    position: relative; 
} 

#parent { 
    width: 100%; 
    height: 100%; 
    background: #00f; 
    position: relative; 
    border-radius: 0px; 
    border: solid 0px white; 
    right: 0px; 
} 

#div1 { 
    width: 3224px; 
    height: 2007px; 
     left: 0; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    background-image: url("https://xphub-resources.s3.amazonaws.com/customer/7dd00ec1-187f-42c2-859c-918d671a2895/img/NH_cidade.jpg"); 
    background-size: cover; 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    right: 0%; 

} 

.wrapper-general { 
    height: 100%; 
    left: 0; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 

#right { 
    position: absolute; 
    right: 0px; 
    top: 50%; 
    z-index: 99999; 
    margin: 0px; 
    width: 90px; 
height: 50px; 
} 

#left { 
    position: absolute; 
    left: 0px; 
    top: 50%; 
    z-index: 99999; 
    margin: 0px; 
    width: 90px; 
height: 50px; 
} 

#top { 
    position: absolute; 
    left: 50%; 
    top: 0%; 
    z-index: 99999; 
    margin: 0px; 
    width: 90px; 
height: 50px; 
} 

#bottom { 
    position: absolute; 
    left: 50%; 
    bottom: 0%; 
    z-index: 99999; 
    margin: 0px; 
    width: 90px; 
height: 50px; 
} 

Answer 1

$(function() { 

     $("#right, #left").click(function() { 
      var dir = this.id == "right" ? '+=' : '-='; 


      var wid = $("#div1").width(); 

      //GET DIV POSITION 
      var pos = parseInt($("#div1").position().left)*-1; 
      //GET ACTUAL POSITION 
      var div_wid = parseInt(wid) - parseInt(pos) 

      //CHECKING 
      if(this.id == "right" && pos >= div_wid) 
      return; 
      if(this.id == "left" && pos <= 0) 
      return; 

      TweenLite.to("#div1", 2, {x:dir + -wid/2}) 
     }); 

    }); 

我建議增加一個檢查像

if(this.id == "right" && pos == div_wid){ 
    return; 
}else{ 
    if(pos + "the number of pixel you are moving" >= div_wid) 
     where_to_move = max_right_position; 
}