jQuery拖拽通过八个点改变div大小，供大家参考，具体内容如下

js:

(function($) { /** * 默认参数 */ var defaultOpts = { stage: document, //舞台 item: 'resize-item', //可缩放的类名 }; /** * 定义类 */ var ZResize = function(options) { this.options = $.extend({}, defaultOpts, options); this.init(); } ZResize.prototype = { init: function() { this.initResizeBox(); }, /** * 初始化拖拽item */ initResizeBox: function() { var self = this; $(self.options.item).each(function () { //创建面板 var width = $(this).width(); var height = $(this).height(); var resizePanel = $('<div class"resize-panel"></div>'); resizePanel.css({ width: width, height: height, top: 0, left: 0, position: 'absolute', 'background-color': 'rgba(0,0,0,0.5)', cursor: 'move', display: 'none' }); self.appendHandler(resizePanel, $(this)); /** * 创建控制点 */ var n = $('<div class="n"></div>');//北 var s = $('<div class="s"></div>');//南 var w = $('<div class="w"></div>');//西 var e = $('<div class="e"></div>');//东 var ne = $('<div class="ne"></div>');//东北 var nw = $('<div class="nw"></div>');//西北 var se = $('<div class="se"></div>');//东南 var sw = $('<div class="sw"></div>');//西南 //添加公共样式 self.addHandlerCss([n, s, w, e, ne, nw, se, sw]); //添加各自样式 n.css({ 'top': '-4px', 'margin-left': '-4px', 'left': '50%', 'cursor': 'n-resize' }); s.css({ 'bottom': '-4px', 'margin-left': '-4px', 'left': '50%', 'cursor': 's-resize' }); e.css({ 'top': '50%', 'margin-top': '-4px', 'right': '-4px', 'cursor': 'e-resize' }); w.css({ 'top': '50%', 'margin-top': '-4px', 'left': '-4px', 'cursor': 'w-resize' }); ne.css({ 'top': '-4px', 'right': '-4px', 'cursor': 'ne-resize' }); nw.css({ top: '-4px', 'left': '-4px', 'cursor': 'nw-resize' }); se.css({ 'bottom': '-4px', 'right': '-4px', 'cursor': 'se-resize' }); sw.css({ 'bottom': '-4px', 'left': '-4px', 'cursor': 'sw-resize' }); // 添加项目 self.appendHandler([n, s, w, e, ne, nw, se, sw], resizePanel); //绑定拖拽缩放事件 self.bindResizeEvent(resizePanel, $(this)); //绑定触发事件 self.bindTrigger($(this)); }); self.bindHidePanel(); }, //控制点公共样式 addHandlerCss: function(els) { for(var i = 0; i < els.length; i++) { el = els[i]; el.css({ position: 'absolute', width: '8px', height: '8px', background: '#ff6600', margin: '0', 'border-radius': '2px', border: '1px solid #dd5500', }); } }, /** * 插入容器 */ appendHandler: function(handlers, target) { for(var i = 0; i < handlers.length; i++) { el = handlers[i]; target.append(el); } }, /** * 显示拖拽面板 */ triggerResize: function(el) { var self = this; el.siblings(self.options.item).children('div').css({ display: 'none' }); el.children('div').css({ display: 'block' }); }, /** * 拖拽事件控制 包含8个缩放点 和一个拖拽位置 */ bindResizeEvent: function(el) { var self = this; var ox = 0; //原始事件x位置 var oy = 0; //原始事件y位置 var ow = 0; //原始宽度 var oh = 0; //原始高度 var oleft = 0; //原始元素位置 var otop = 0; var org = el.parent('div'); //东 var emove = false; el.on('mousedown','.e', function(e) { ox = e.pageX;//原始x位置 ow = el.width(); emove = true; }); //南 var smove = false; el.on('mousedown','.s', function(e) { oy = e.pageY;//原始x位置 oh = el.height(); smove = true; }); //西 var wmove = false; el.on('mousedown','.w', function(e) { ox = e.pageX;//原始x位置 ow = el.width(); wmove = true; oleft = parseInt(org.css('left').replace('px', '')); }); //北 var nmove = false; el.on('mousedown','.n', function(e) { oy = e.pageY;//原始x位置 oh = el.height(); nmove = true; otop = parseInt(org.css('top').replace('px', '')); }); //东北 var nemove = false; el.on('mousedown','.ne', function(e) { ox = e.pageX;//原始x位置 oy = e.pageY; ow = el.width(); oh = el.height(); nemove = true; otop = parseInt(org.css('top').replace('px', '')); }); //西北 var nwmove = false; el.on('mousedown','.nw', function(e) { ox = e.pageX;//原始x位置 oy = e.pageY; ow = el.width(); oh = el.height(); otop = parseInt(org.css('top').replace('px', '')); oleft = parseInt(org.css('left').replace('px', '')); nwmove = true; }); //东南 var semove = false; el.on('mousedown','.se', function(e) { ox = e.pageX;//原始x位置 oy = e.pageY; ow = el.width(); oh = el.height(); semove = true; }); //西南 var swmove = false; el.on('mousedown','.sw', function(e) { ox = e.pageX;//原始x位置 oy = e.pageY; ow = el.width(); oh = el.height(); swmove = true; oleft = parseInt(org.css('left').replace('px', '')); }); //拖拽 var drag = false; el.on('mousedown', function(e) { ox = e.pageX;//原始x位置 oy = e.pageY; otop = parseInt(org.css('top').replace('px', '')); oleft = parseInt(org.css('left').replace('px', '')); drag = true; }); $(self.options.stage).on('mousemove', function(e) { if(emove) { var x = (e.pageX - ox); el.css({ width: ow + x }); org.css({ width: ow + x }); } else if(smove) { var y = (e.pageY - oy); el.css({ height: oh + y }); org.css({ height: oh + y }); } else if(wmove) { var x = (e.pageX - ox); el.css({ width: ow - x, // left: oleft + x }); org.css({ width: ow - x, left: oleft + x }); } else if(nmove) { var y = (e.pageY - oy); el.css({ height: oh - y, // top: otop + y }); org.css({ height: oh - y, top: otop + y }); } else if(nemove) { var x = e.pageX - ox; var y = e.pageY - oy; el.css({ height: oh - y, // top: otop + y, width: ow + x }); org.css({ height: oh - y, top: otop + y, width: ow + x }); } else if(nwmove) { var x = e.pageX - ox; var y = e.pageY - oy; el.css({ height: oh - y, // top: otop + y, width: ow - x, // left: oleft + x }); org.css({ height: oh - y, top: otop + y, width: ow - x, left: oleft + x }); } else if(semove) { var x = e.pageX - ox; var y = e.pageY - oy; el.css({ width: ow + x, height: oh + y }); org.css({ width: ow + x, height: oh + y }); } else if(swmove) { var x = e.pageX - ox; var y = e.pageY - oy; el.css({ width: ow - x, // left: oleft + x, height: oh + y }); org.css({ width: ow - x, left: oleft + x, height: oh + y }); } else if(drag) { var x = e.pageX - ox; var y = e.pageY - oy; org.css({ left: oleft + x, top: otop + y }); } }).on('mouseup', function(e) { emove = false; smove = false; wmove = false; nmove = false; nemove = false; nwmove = false; swmove = false; semove = false; drag = false; }); }, /** * 点击item显示拖拽面板 */ bindTrigger: function(el) { var self = this; el.on('click', function(e) { e.stopPropagation(); self.triggerResize(el); }); }, /** * 点击舞台空闲区域 隐藏缩放面板 */ bindHidePanel: function(el) { var stage = this.options.stage; var item = this.options.item; $(stage).bind('click', function() { $(item).children('div').css({ display: 'none' }); }) } } window.ZResize = ZResize; })(jQuery);

html:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery拖拽放大缩小插件idrag</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> .item1 { width: 405px; height: 291px; cursor: move; position: absolute; top: 30px; left: 30px; background-color: #FFF; border: 1px solid #CCCCCC; -webkit-box-shadow: 10px 10px 25px #ccc; -moz-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc; } .item2 { width: 200px; height: 100px; cursor: move; position: absolute; top: 400px; left: 100px; background-color: #FFF; border: 1px solid #CCCCCC; -webkit-box-shadow: 10px 10px 25px #ccc; -moz-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc; line-height: 100px; text-align: center; } body { background-color: #F3F3F3; } </style> </head> <body> <div id="mydiv" style="width:800px; height:800px; border-style:solid"> <div id="div1" class="resize-item item1"> <img src="images/dog.png" width="100%" height="100%"> </div> <div class="resize-item item2"> 你是我的小小狗 </div> </div> <script src="jquery.min.js"></script> <script type="text/javascript" src='jquery.ZResize.js'></script> <script type="text/javascript"> new ZResize({ stage: "#mydiv", //舞台 item: '#div1', //可缩放的类名 }); </script> </body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。