Помогите мне понять этот код 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; 
}; 

Этот код перетащить дивы. Он работает для меня, но я использовал его для элемента, который был установлен для наложения: hidden; внутри обертки div. Он позволяет прокручивать div на ipad.

Проблема только в том, что когда я подбираю элемент/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>