idrag一款基于的jQuery拖拽div层放大缩小插件

idrag一款基于的jQuery拖拽div层放大缩小插件
 点击预览  点击下载

基于jQuery:

  1. $(document).mousemove(function(e) { 
  2.     if (!!this.move) { 
  3.         var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix, 
  4.             callback = document.call_down || function() { 
  5.                 $(this.move_target).css({ 
  6.                     'top': e.pageY - posix.y, 
  7.                     'left': e.pageX - posix.x 
  8.                 }); 
  9.             }; 
  10.   
  11.         callback.call(this, e, posix); 
  12.     } 
  13. }).mouseup(function(e) { 
  14.     if (!!this.move) { 
  15.         var callback = document.call_up || function(){}; 
  16.         callback.call(this, e); 
  17.         $.extend(this, { 
  18.             'move'false
  19.             'move_target'null
  20.             'call_down'false
  21.             'call_up'false 
  22.         }); 
  23.     } 
  24. }); 

原理稍后分析,先来看看效果:

将代码剥离,只要写5行就可以实现拖拽了,是不是很简单:

  1. $('#box').mousedown(function(e) { 
  2.     var offset = $(this).offset(); 
  3.       
  4.     this.posix = {'x': e.pageX - offset.left, 'y': e.pageY - offset.top}; 
  5.     $.extend(document, {'move'true'move_target'this}); 
  6. }); 

将代码剥离,原先的代码保留不变,增加一个绑定事件:

  1. var $box = $('#box').mousedown(function(e) { 
  2.     var offset = $(this).offset(); 
  3.       
  4.     this.posix = {'x': e.pageX - offset.left, 'y': e.pageY - offset.top}; 
  5.     $.extend(document, {'move'true'move_target'this}); 
  6. }).on('mousedown''#coor'function(e) { 
  7.     var posix = { 
  8.             'w': $box.width(),  
  9.             'h': $box.height(),  
  10.             'x': e.pageX,  
  11.             'y': e.pageY 
  12.         }; 
  13.       
  14.     $.extend(document, {'move'true'call_down'function(e) { 
  15.         $box.css({ 
  16.             'width': Math.max(30, e.pageX - posix.x + posix.w), 
  17.             'height': Math.max(30, e.pageY - posix.y + posix.h) 
  18.         }); 
  19.     }}); 
  20.     return false
  21. }); 

这样来实现放大、缩小、拖拽是不是很简答,还能实现很多其他效果,大家慢慢领悟。

原理分析:

放大、缩小、拖拽都离不开在网页上拖动鼠标,对于前端来说就是document的mousemove,当鼠标在网页上移动的时候,无时无刻不在触发mousemove事件,当鼠标触发事件时,什么时候需要执行我们特定的操作,这就是我们要做的了。我在mousemove中增加了几个对象来判定是否进行操作:

    move:是否执行触发操作

    move_target:操作的元素对象

    move_target.posix:操作对象的坐标

    call_down:mousemove的时候的回调函数,传回来的this指向document

    call_up:当鼠标弹起的时候执行的回调函数,传回来的this指向document

小提示:

    简单的操作,只需要设定move_target对象,设置move_target的时候不要忘记了move_target.posix哦;

    复杂的操作可以通过call_down、call_up进行回调操作,这个时候是可以不用设置move_target对象的

转载请注明:代码家园 » idrag一款基于的jQuery拖拽div层放大缩小插件

也许你会喜欢和关注与本文内容高度相关的文章:

支持缩放的jQuery放大效果

jQuery放大镜插件 AnythingZoomer

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)