title: Limit the movement of the cube
body: <p>How to limit the movement of this cube to just up and down, left and right?
  I want to remove the diagonal movement. When someone touches or move it diagonally I want it to move neither left or right defends where do they touch.</p>
  
  <p>you can check the working file: <a href="http://jsfiddle.net/7Lg87gzu/4/" rel="nofollow">http://jsfiddle.net/7Lg87gzu/4/</a></p>
  
  <p>Here is the js code</p>
  
  <pre><code>$(function(){
  
      var el = document.createElement('div'),
          transformProps = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
          transformProp = support(transformProps),
          transitionDuration = 'transitionDuration WebkitTransitionDuration MozTransitionDuration OTransitionDuration msTransitionDuration'.split(' '),
          transitionDurationProp = support(transitionDuration);
  
      function support(props) {
          for(var i = 0, l = props.length; i &lt; l; i++) {
              if(typeof el.style[props[i]] !== "undefined") {
                  return props[i];
              }
          }
      }
  
      var mouse = {
              start : {}
          },
          touch = document.ontouchmove !== undefined,
          viewport = {
              x: -10,
              y: 20,
              el: $('.cube')[0],
              move: function(coords) {
                  if(coords) {
                      if(typeof coords.x === "number") this.x = coords.x;
                      if(typeof coords.y === "number") this.y = coords.y;
                  }
  
                  this.el.style[transformProp] = "rotateX("+this.x+"deg) rotateY("+this.y+"deg)";
              },
              reset: function() {
                  this.move({x: 0, y: 0});
              }
          };
  
      viewport.duration = function() {
          var d = touch ? 50 : 2000;
          viewport.el.style[transitionDurationProp] = d + "ms";
          return d;
      }();
  
      $(document).keydown(function(evt) {
          switch(evt.keyCode)
          {
              case 37: // left
                  viewport.move({y: viewport.y - 90});
                  break;
  
              case 38: // up
                  evt.preventDefault();
                  viewport.move({x: viewport.x + 90});
                  break;
  
              case 39: // right
                  viewport.move({y: viewport.y + 90});
                  break;
  
              case 40: // down
                  evt.preventDefault();
                  viewport.move({x: viewport.x - 90});
                  break;
  
              case 27: //esc
                  viewport.reset();
                  break;
  
              default:
                  break;
          };
      }).bind('mousedown touchstart', function(evt) {
          delete mouse.last;
          if($(evt.target).is('a, iframe')) {
              return true;
          }
  
          evt.originalEvent.touches ? evt = evt.originalEvent.touches[0] : null;
          mouse.start.x = evt.pageX;
          mouse.start.y = evt.pageY;
          $(document).bind('mousemove touchmove', function(event) {
              // Only perform rotation if one touch or mouse (e.g. still scale with pinch and zoom)
              if(!touch || !(event.originalEvent &amp;&amp; event.originalEvent.touches.length &gt; 1)) {
                  event.preventDefault();
                  // Get touch co-ords
                  event.originalEvent.touches ? event = event.originalEvent.touches[0] : null;
                  $('.viewport').trigger('move-viewport', {x: event.pageX, y: event.pageY});
              }
          });
  
          $(document).bind('mouseup touchend', function () {
              $(document).unbind('mousemove touchmove');
          });
      });
  
      $('.viewport').bind('move-viewport', function(evt, movedMouse) {
  
          // Reduce movement on touch screens
          var movementScaleFactor = touch ? 4 : 1;
  
          if (!mouse.last) {
              mouse.last = mouse.start;
          } else {
              if (forward(mouse.start.x, mouse.last.x) != forward(mouse.last.x, movedMouse.x)) {
                  mouse.start.x = mouse.last.x;
              }
              if (forward(mouse.start.y, mouse.last.y) != forward(mouse.last.y, movedMouse.y)) {
                  mouse.start.y = mouse.last.y;
              }
          }
  
          viewport.move({
              x: viewport.x + parseInt((mouse.start.y - movedMouse.y)/movementScaleFactor),
              y: viewport.y - parseInt((mouse.start.x - movedMouse.x)/movementScaleFactor)
          });
  
          mouse.last.x = movedMouse.x;
          mouse.last.y = movedMouse.y;
  
          function forward(v1, v2) {
              return v1 &gt;= v2 ? true : false;
          }
      });
  
      /* Just for fun */
    /*  if(!touch) {
          $('.cube &gt; div').eq(2).html('&lt;object width="360" height="360"&gt;&lt;param name="movie" value="http://www.youtube.com/v/MY5PkidV1cM?fs=1&amp;amp;hl=en_GB&amp;amp;rel=0"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"&gt;&lt;/param&gt;&lt;param name="allowscriptaccess" value="always"&gt;&lt;/param&gt;&lt;embed src="#" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="360"&gt;&lt;/embed&gt;&lt;/object&gt;');
      }*/
  
  });
  </code></pre>