jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

前端之家收集整理的这篇文章主要介绍了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法分享给大家供大家参考,具体如下:

插件文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧。

插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高。整体代码如下:

无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档
Box">拖拽我吧!

插件 jquery.dragscale.js 代码

获取鼠标距离匹配元素的父元素左侧的距离 var y = e.pageY - obj.position().top; //获取鼠标距离匹配元素的父元素顶端的距离 $(document).mousemove(function(e){ var e = e || event; var _x = e.pageX - x; //动态获取匹配元素距离其父元素左侧的宽度 var _y = e.pageY - y; _x = _x < opts.minW ? opts.minW : _x; //保证匹配元素的最小宽度为150px _x = _x > opts.maxW ? opts.maxW : _x; //保证匹配元素的最大宽度为500px _y = _y < opts.minH ? opts.minH : _y; _y = _y > opts.maxH ? opts.maxH : _y; obj.parent().css({width:_x,height:_y}); }).mouseup(function(){ $(this).unbind("mousemove"); //当鼠标抬起 删除移动事件 匹配元素宽高变化停止 }); }); }) } })(jQuery);

完整实例代码点击此处

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《插件用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

原文链接:https://www.f2er.com/jquery/49955.html

猜你在找的jQuery相关文章