幫我理解這個jQuery代碼？

Question

它頗多......

// DEFINE DEFAULT VARIABLES 
var _target=null, _dragx=null, _dragy=null, _rotate=null, _resort=null; 
var _dragging=false, _sizing=false, _animate=false; 
var _rotating=0, _width=0, _height=0, _left=0, _top=0, _xspeed=0, _yspeed=0; 
var _zindex=1000; 

jQuery.fn.touch = function(settings) { 

    // DEFINE DEFAULT TOUCH SETTINGS 
    settings = jQuery.extend({ 
     animate: true, 
     sticky: false, 
     dragx: true, 
     dragy: true, 
     rotate: false, 
     resort: true, 
     scale: false 
    }, settings); 

    // BUILD SETTINGS OBJECT 
    var opts = []; 
    opts = $.extend({}, $.fn.touch.defaults, settings); 

    // ADD METHODS TO OBJECT 
    this.each(function(){ 
     this.opts = opts; 
     this.ontouchstart = touchstart; 
     this.ontouchend = touchend; 
     this.ontouchmove = touchmove; 
     this.ongesturestart = gesturestart; 
     this.ongesturechange = gesturechange; 
     this.ongestureend = gestureend; 
    }); 
}; 
function touchstart(e){ 
    _target = this.id; 
    _dragx = this.opts.dragx; 
    _dragy = this.opts.dragy; 
    _resort = this.opts.resort; 
    _animate = this.opts.animate; 
    _xspeed = 0; 
    _yspeed = 0; 

    $(e.changedTouches).each(function(){ 

     var curLeft = ($('#'+_target).css("left") == 'auto') ? this.pageX : parseInt($('#'+_target).css("left")); 
     var curTop = ($('#'+_target).css("top") == 'auto') ? this.pageY : parseInt($('#'+_target).css("top")); 

     if(!_dragging && !_sizing){ 
      _left = (e.pageX - curLeft); 
      _top = (e.pageY - curTop); 
      _dragging = [_left,_top]; 
      if(_resort){ 
       _zindex = ($('#'+_target).css("z-index") == _zindex) ? _zindex : _zindex+1; 
       $('#'+_target).css({ zIndex: _zindex }); 
      } 
     } 
    }); 
}; 
function touchmove(e){ 

    if(_dragging && !_sizing && _animate) { 

     var _lastleft = (isNaN(parseInt($('#'+_target).css("left")))) ? 0:parseInt($('#'+_target).css("left")); 
     var _lasttop = (isNaN(parseInt($('#'+_target).css("top")))) ? 0:parseInt($('#'+_target).css("top")); 
    } 

    $(e.changedTouches).each(function(){ 

     e.preventDefault(); 

     _left = (this.pageX-(parseInt($('#'+_target).css("width"))/2)); 
     _top = (this.pageY-(parseInt($('#'+_target).css("height"))/2)); 

     if(_dragging && !_sizing) { 

      if(_animate){ 
       _xspeed = Math.round((_xspeed + Math.round(_left - _lastleft))/1.5); 
       _yspeed = Math.round((_yspeed + Math.round(_top - _lasttop))/1.5); 
      } 

      if(_dragx || _dragy) $('#'+_target).css({ position: "absolute" }); 
      if(_dragx) $('#'+_target).css({ left: _left+"px" }); 
      if(_dragy) $('#'+_target).css({ top: _top+"px" }); 

     } 
    }); 
}; 
function touchend(e){ 
    $(e.changedTouches).each(function(){ 
     if(!e.targetTouches.length){ 
      _dragging = false; 
      if(_animate){ 
       _left = ($('#'+_target).css("left") == 'auto') ? this.pageX : parseInt($('#'+_target).css("left")); 
       _top = ($('#'+_target).css("top") == 'auto') ? this.pageY : parseInt($('#'+_target).css("top")); 

       var animx = (_dragx) ? (_left+_xspeed)+"px" : _left+"px"; 
       var animy = (_dragy) ? (_top+_yspeed)+"px" : _top+"px"; 

       if(_dragx || _dragy) $('#'+_target).animate({ left: animx, top: animy }, "fast"); 
      } 
     } 
    }); 

    setTimeout(changeBack,5000,_target); 
}; 
function gesturestart(e){ 
    _sizing = [$('#'+this.id).css("width"), $('#'+this.id).css("height")]; 
}; 
function gesturechange(e){ 
    if(_sizing){ 
     _width = (this.opts.scale) ? Math.min(parseInt(_sizing[0])*e.scale, 300) : _sizing[0]; 
     _height = (this.opts.scale) ? Math.min(parseInt(_sizing[1])*e.scale, 300) : _sizing[1]; 
     _rotate = (this.opts.rotate) ? "rotate(" + ((_rotating + e.rotation) % 360) + "deg)" : "0deg";  
     $('#'+this.id).css({ width: _width+"px", height: _height+"px", webkitTransform: _rotate }); 
    } 
}; 
function gestureend(e){ 
    _sizing = false; 
    _rotating = (_rotating + e.rotation) % 360; 
}; 

此代碼是拖放的div。它爲我工作，但我用它是一個設置爲重疊的元素：隱藏;在一個包裝div。它可以讓它滾動瀏覽ipad上的div。

唯一的問題是當我拿起元素/ div時，它直接在中間拾取它，而不是我點擊的地方。

任何人都可以幫助我找出這段代碼控制的部分是什麼&給了我如何解決這個問題的任何想法？

非常感謝給誰試圖:)

當你移動元素，它會發生，而不是當你第一次點擊它。因此，即時通訊中的TouchMove功能假定它..

Answer 1

在功能touchmove

發現：

_left = (this.pageX-(parseInt($('#'+_target).css("width"))/2)); 
_top = (this.pageY-(parseInt($('#'+_target).css("height"))/2)); 

變化：

_left = (this.pageX); 
_top = (this.pageY); 

Answer 2

這裏有一個快速演示：http://jsbin.com/akeha3

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>Drag !!</title> 
<style type="text/css"> 
    #drag { 
    width :100px; 
    height:100px; 
    position:absolute; 
    border:1px solid #000; 
    background:#0f0; 
    cursor:pointer; 
    } 
</style> 

</head> 
<body> 
    <div id="drag" > Drag </div> 

</body> 
</html> 

的JavaScript：

(function($) { 
    $.fn.touch = function() { 

    var X  = 0, 
     Y  = 0, 
     posX = 0, 
     posY = 0, 
     drag = false; 
     var cache = $(this); 
     cache 
     .mousedown(function(e) { 
      X = e.pageX; 
      Y = e.pageY; 
      posX = parseInt($(this).position().left); 
      posY = parseInt($(this).position().top ); 
      drag = true; 

     }); 

    $(document) 
     .mousemove(function(e) { 
      if(drag && (X - e.pageX != 0 && Y - e.pageY != 0)){ 
       cache.css({left:e.pageX + posX - X , top:e.pageY + posY - Y}); 
       return false; 
      } 
      return false; 
     }).mouseup(function() { 
      drag = false; 
      return false; 
     }); 
    } 
})(jQuery); 

使用：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#drag').touch(); 
}); 
</script>