Help me understand this jquery code?

Question

Its quite a lot...

// 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;
};

This code is to drag and drop divs. Its working for me, but what I used it for is an element that was set to overlay:hidden; inside a wrapper div. It lets it scroll through the div on the ipad.

The only problem is when I pick up the element/div, it picks it up directly in the middle, and not where I clicked.

Can anyone help me figure out what part of this code controls that & give me any ideas on how to fix this issue?

Thanks so much to whoever tries :)

It happens when you move the element, not when you first click it. So im assuming its in the touchmove function..

Answer 1

In function touchmove

find:

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

change to:

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

Answer 2

Here's a quick Demo : 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); 

usage :

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