本文執行個體講述了jquery插件jquery.dragscale.js實作拖拽改變元素大小的方法。分享給大家供大家參考，具體如下：
該插件是文章作者所寫，目的在于提升作者的js能力，也給一些js菜鳥在使用插件時提供一些便利，老鳥就悠然地飛過吧。
此插件旨在實作目前較為流行的拖拽改變元素大小的效果，您可以根據自己的實際需求來設定被拖拽元素的最小寬高和最大寬高。整體代碼如下：
無标題文檔
拖拽我吧！《script》$(function(){ $(".drag").resizable({ minW : 150, minH : 150, maxW : 500, maxH : 500, }); })《script》
插件 jquery.dragscale.js 代碼：
;(function(a){ a.fn.resizable = function(options){ var defaults = { //預設參數 minW : 150, minH : 150, maxW : 500, maxH : 500, } var opts = a.extend(defaults, options); this.each(function(){ var obj = a(this); obj.mousedown(function(e){ var e = e || event; //區分IE和其他浏覽器事件對象 var x = e.pageX - obj.position().left; //擷取滑鼠距離比對元素的父元素左側的距離 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拖拽特效與技巧總結》、《jQuery擴充技巧總結》、《jQuery常見經典特效彙總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程式設計有所幫助。