Pastebin launched a little side project called HostCabi.net, check it out ;-)Don't like ads? PRO users don't see any ads ;-)
Guest

DragMove part of big function

By: sidoruk_sv on Sep 23rd, 2011  |  syntax: JavaScript  |  size: 3.06 KB  |  hits: 71  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /* ------------- Drag for Mouse and Mobile devices ------------- */
  2. var useMobileDrag = false;
  3. var isiPad = navigator.userAgent.match(/iPad/i) != null;
  4. var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  5. var isiPod = navigator.userAgent.match(/iPod/i) != null;
  6. if (isiPad || isiPhone || isiPod) useMobileDrag = true;
  7.  
  8. /**/
  9. var isDragging = false;
  10. var OnDrag = false;
  11. var     originalX;
  12. var currentX;
  13. var     dragLengthX;
  14. function dragStart(event) {
  15.                 OnDrag = true;
  16.                 dragLengthX = 0;
  17.                 isDragging = true;
  18.                 originalX = (useMobileDrag ? event.targetTouches[0].pageX : event.pageX);
  19.                 return false
  20. };
  21.  
  22. function dragMove(event) {
  23.         if (OnDrag){
  24.                 currentX = (useMobileDrag ? event.targetTouches[0].pageX : event.pageX);
  25.                 dragLengthX =  currentX - originalX;
  26.                 if (Math.abs(dragLengthX)<2) {
  27.                        return false
  28.                 }
  29.                 else{
  30.                         box.css({
  31.                                 '-webkit-transition-timing-function': settings.easingCss,
  32.                                 '-webkit-transition-duration': 0 + 'ms',
  33.                                 '-webkit-transform': 'translate3d(' + dragLengthX + 'px, 0px, 0px)',
  34.                                 'transition-timing-function': settings.easingCss,
  35.                                 'transition-duration': 0 + 'ms',
  36.                                 'transform': 'translate3d(' + dragLengthX + 'px, 0px, 0px)'
  37.                         });
  38.                 }
  39.         }
  40.         return false
  41. };
  42. function dragCancel(){console.log("canseling swipe")}
  43. function dragEnd(){
  44.         OnDrag = false;
  45.         wrapperHalfWidth = box.parent().width() * settings.animPartofScrennToSlide
  46.         if (Math.abs(dragLengthX) > wrapperHalfWidth ){
  47.                 this.removeEventListener((useMobileDrag ? "touchstart" : "mousedown"), dragStart, false);
  48.                 this.removeEventListener((useMobileDrag ? "touchmove" : "mousemove"), dragMove, false);
  49.                 this.removeEventListener((useMobileDrag ? "touchend" : "mouseup"), dragEnd, false);
  50.                 this.removeEventListener("touchcancel", dragCancel, false);
  51.  
  52.                 var Direction = dragLengthX > 0;
  53.                 settings.prevNextClickCallback(outerSlCounter, Direction ? FORWARD : BACK);
  54.  
  55.                 setTimeout(function(){
  56.                         this.addEventListener((useMobileDrag ? "touchstart" : "mousedown"), dragStart, false);
  57.                         this.addEventListener((useMobileDrag ? "touchmove" : "mousemove"), dragMove, false);
  58.                         this.addEventListener((useMobileDrag ? "touchend" : "mouseup"), dragEnd, false);
  59.                         this.addEventListener("touchcancel", dragCancel, false);
  60.                 }, 500);
  61.                 return SlideTo(outerSlCounter + (Direction ? -1 : 1));
  62.         }
  63.         else{  
  64.                 dragLengthX = 0;
  65.                 box.css({
  66.                         '-webkit-transition-timing-function': settings.easingCss,
  67.                         '-webkit-transition-duration': settings.animDragTime + 'ms',
  68.                         '-webkit-transform': 'translate3d(' + dragLengthX + 'px, 0px, 0px)',
  69.                         'transition-timing-function': settings.easingCss,
  70.                         'transition-duration': settings.animDragTime + 'ms',
  71.                         'transform': 'translate3d(' + dragLengthX + 'px, 0px, 0px)'
  72.                 });
  73.         }
  74.         isDragging = false;
  75.         originalX = 0;
  76. };
  77.  
  78.  
  79. this.addEventListener((useMobileDrag ? "touchstart" : "mousedown"), dragStart, false);
  80. this.addEventListener((useMobileDrag ? "touchmove" : "mousemove"), dragMove, false);
  81. this.addEventListener((useMobileDrag ? "touchend" : "mouseup"), dragEnd, false);
  82. this.addEventListener("touchcancel", dragCancel, false);