24行代码，让你的网页元素任意放大、缩小、拖拽、移动

原文地址：点击打开链接

前段时间写的，蛮长时间了。个人很喜欢，一段很简单的代码，却能够实现很多功能。到底多简单，先来看代码：

基于jQuery：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

$(document).mousemove( function (e) {      if (!! this .move) {          var posix = !document.move_target ? { 'x' : 0, 'y' : 0} : document.move_target.posix,              callback = document.call_down || function () {                  $( this .move_target).css({                      'top' : e.pageY - posix.y,                      'left' : e.pageX - posix.x                  });              };            callback.call( this , e, posix);      } }).mouseup( function (e) {      if (!! this .move) {          var callback = document.call_up || function (){};          callback.call( this , e);          $.extend( this , {              'move' : false ,              'move_target' : null ,              'call_down' : false ,              'call_up' : false          });      } });

原理稍后分析，先来看看效果：

简单的拖拽

src="http://jsfiddle.net/aiyuchen/Kpb8p/embedded/result,js,css,html" style="border-width: 0px; border-style: initial; margin: 0px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 28.8px; width: 861.078px; height: 300px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">

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

1 2 3 4 5 6

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

放大、缩小

我们给拖拽增加点功能，支持放大、缩小，先看效果

src="http://jsfiddle.net/aiyuchen/FmMc2/embedded/result,js,css,html" style="border-width: 0px; border-style: initial; margin: 0px; padding: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: Georgia, 'Bitstream Charter', serif; font-size: 16px; line-height: 28.8px; width: 861.078px; height: 300px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

var $box = $( '#box' ).mousedown( function (e) {      var offset = $( this ).offset();            this .posix = { 'x' : e.pageX - offset.left, 'y' : e.pageY - offset.top};      $.extend(document, { 'move' : true , 'move_target' : this }); }).on( 'mousedown' , '#coor' , function (e) {      var posix = {              'w' : $box.width(),              'h' : $box.height(),              'x' : e.pageX,              'y' : e.pageY          };            $.extend(document, { 'move' : true , 'call_down' : function (e) {          $box.css({              'width' : Math.max(30, e.pageX - posix.x + posix.w),              'height' : Math.max(30, e.pageY - posix.y + posix.h)          });      }});      return false ; });

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

原理分析：

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

• move：是否执行触发操作
• move_target：操作的元素对象
• move_target.posix：操作对象的坐标
• call_down：mousemove的时候的回调函数，传回来的this指向document
• call_up：当鼠标弹起的时候执行的回调函数，传回来的this指向document

小提示：

1. 简单的操作，只需要设定move_target对象，设置move_target的时候不要忘记了move_target.posix哦；
2. 复杂的操作可以通过call_down、call_up进行回调操作，这个时候是可以不用设置move_target对象的

深入研究

拖拽和放大、缩小实现了，但是有个问题，当我们鼠标点击并滑动的时候，是会选中文本的，为了避免这个问题，大家可以参考这篇文章

难道你以为仅仅这样就可以阻止firefox选中文本了嘛

网页的放大、缩小、拖拽事件就研究到这里了，如果你还有什么疑问，欢迎留言哦～～

最后，有什么问题，大家可以给我留言哦，别忘了关注我的博客哦：

http://list.qq.com/cgi-bin/qf_invite?id=b6eb34388fd016582957d6e50d005146e24fe6b166ee66c0