首页 / 脚本样式 / JavaScript / jQuery拖拽通过八个点改变div大小

（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）; 

<！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>