2010-08-18 42 views
1

我有一个div例如,当你拿起它开始拖动时,它捕捉div使光标/鼠标位于它的中间。请帮忙吗?当元素被拖拽拾取时,它只能从中间拾取?

这是代码..

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

当您开始拖移,而不是当你第一次点击下这才会发生。

有人告诉我改:

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

到:

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

但是,这只是使得它从顶部回暖。
如何使它从鼠标点击的位置拾取?

编辑: 这是iPad和它不工作的计算机上测试.. 但任何帮助将是巨大的,即时通讯卡

回答

0

我不知道太多关于_top_left变量,但也许你可以在onclick事件中将它们设置为鼠标位置。此页面有一些用于选择鼠标位置的代码: Mouse tracking using Javascript