标签：style blog http color width art
有时项目中会遇到需要拖动元素、拖拽调整元素大小的需求。大部分时候都不想自己写一遍，因为已经有很多现成的例子了。例如jqueryui提供的drag和resize。但是仅仅是为了这么小一个功能就引入一个库，真是有点划不来，性价比太低了撒。于是自己实现了一遍，写了两个通用函数，需要的时候直接把他们考到项目中就可以啦。代码很清爽有木有！
先说元素拖动，其实就是动态改变元素的left值和top值，当然前提是元素必须是绝对定位或者相对定位的。代码如下：
function draggable(el){ el.css(‘cursor‘, ‘move‘); var eventX, eventY, startX, startY, drag; el.on(‘mousedown‘, function(event){ eventX = event.clientX; eventY = event.clientY; startX = parseInt(el.css(‘left‘)); startY = parseInt(el.css(‘top‘)); drag = true; if(this.setCapture){this.setCapture();} }).on(‘mouseup‘, function(event){ drag = false; if(this.releaseCapture){this.releaseCapture();} }); $(document).on(‘mousemove‘, function(event){ if(drag){ var l = startX + (event.clientX - eventX); var t = startY + (event.clientY - eventY); el.css({left : l, top : t,}); } }).on(‘mouseup‘, function(){ drag = false; }); }
看一下效果：
代码放在了runjs.cn上，查看源码请点这里http://runjs.cn/code/jfqpe2lo
拖拽调整元素大小稍微复杂点，其实原理与拖动元素也差不多，无非是动态改变的属性多了些，包括left、top、width、height。代码有点长就不贴这里了。先看下效果：
代码放在了runjs.cn上，查看源码请点这里http://runjs.cn/code/ihiqp2pa
drag & resize元素的jQuery实现,布布扣,bubuko.com
标签：style blog http color width art
原文地址：http://www.cnblogs.com/lvdabao/p/3847432.html
