[转载][分享] jQuery 版“元素拖拽改变大小”原型 – 小吴同学 – 博客园.
“元素拖拽改变大小”其实和“元素拖拽”一个原理,只是所动态改变的对象不同而已,主要在于 top、left、width、height 的运用,相对实现起来也非常容易。以下附出源码原型,弄明白了原理再扩展其他实际应用,思路就变得简单、清晰得多了。
在引入 JQuery.js 后:
<script type="text/javascript">// <![CDATA[ $(function(){ //绑定需要拖拽改变大小的元素对象 bindResize(document.getElementById('test')) }); function bindResize(el){ //初始化参数 var els = el.style, //鼠标的 X 和 Y 轴坐标 x = y = 0; //邪恶的食指 $(el).mousedown(function(e){ //按下元素后,计算当前鼠标与对象计算后的坐标 x = e.clientX - el.offsetWidth, y = e.clientY - el.offsetHeight; //在支持 setCapture 做些东东 el.setCapture ? ( //捕捉焦点 el.setCapture(), //设置事件 el.onmousemove = function(ev){ mouseMove(ev || event) }, el.onmouseup = mouseUp ) : ( //绑定事件 $(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp) ) //防止默认事件发生 e.preventDefault() }); //移动事件 function mouseMove(e){ //宇宙超级无敌运算中... els.width = e.clientX - x + 'px', els.height = e.clientY - y + 'px' } //停止事件 function mouseUp(){ //在支持 releaseCapture 做些东东 el.releaseCapture ? ( //释放焦点 el.releaseCapture(), //移除事件 el.onmousemove = el.onmouseup = null ) : ( //卸载事件 $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp) ) } } // ]]></script>
width 和 height 的中不允许出现负数的值,否则会报错,那么根据这个需求简单扩展了一个“限制最小高宽”的小实例:
<script type="text/javascript">// <![CDATA[ $(function(){ //绑定需要拖拽改变大小的元素对象 bindResize(document.getElementById('test'),200,100); }); //绑定需要拖拽改变大小的元素对象 //el 元素对象 //minW 最小宽度 //minH 最小高度 function bindResize(el,minW,minH){ //初始化参数 var els = el.style, //鼠标的 X 和 Y 轴坐标 x = y = Xm = Ym = 0; //邪恶的食指 $(el).mousedown(function(e){ //按下元素后,计算当前鼠标与对象计算后的坐标 x = e.clientX - el.offsetWidth, y = e.clientY - el.offsetHeight; //在支持 setCapture 做些东东 el.setCapture ? ( //捕捉焦点 el.setCapture(), //设置事件 el.onmousemove = function(ev){ mouseMove(ev || event) }, el.onmouseup = mouseUp ) : ( //绑定事件 $(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp) ) //防止默认事件发生 e.preventDefault() }); //移动事件 function mouseMove(e){ //宇宙超级无敌运算中... Xm = e.clientX - x, Ym = e.clientY - y; //限制高宽 Xm <= minW && (Xm = minW), Ym <= minH && (Ym = minH); //设置大小 els.width = Xm + 'px', els.height = Ym + 'px' } //停止事件 function mouseUp(){ //在支持 releaseCapture 做些东东 el.releaseCapture ? ( //释放焦点 el.releaseCapture(), //移除事件 el.onmousemove = el.onmouseup = null ) : ( //卸载事件 $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp) ) } } // ]]></script>
下载:实例原型