今天写了一天这个jquery插件:
可以实现对div进行拖拽来调整大小的功能。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 (function ($) { 2 $.fn.dragDivResize = function () { 3 var deltaX, deltaY, _startX, _startY; 4 var resizeW, resizeH; 5 var size = 20; 6 var minSize = 10; 7 var scroll = getScrollOffsets(); 8 var _this = this; 9 10 for (var i = 0; i < _this.length; i++) { 11 var target = this[i]; 12 $(target).on("mouseover mousemove", overHandler); 13 } 14 function outHandler() { 15 for (var i = 0; i < _this.length; i++) { 16 target.style.outline = "none"; 17 } 18 document.body.style.cursor = "default"; 19 } 20 21 function overHandler(event) { 22 target = event.target || event.srcElement; 23 var startX = event.clientX + scroll.x; 24 var startY = event.clientY + scroll.y; 25 var w = $(target).width(); 26 var h = $(target).height(); 27 _startX = parseInt(startX); 28 _startY = parseInt(startY); 29 if ((0 < target.offsetLeft + w - _startX && target.offsetLeft + w - _startX < size) || (0 < target.offsetTop + h - _startY && target.offsetTop + h - _startY < size)) { 30 target.style.outline = "2px dashed #333"; 31 if ((0 > target.offsetLeft + w - _startX || target.offsetLeft + w - _startX > size) && 0 < target.offsetTop + h - _startY && target.offsetTop + h - _startY < size) { 32 resizeW = false; 33 resizeH = true; 34 document.body.style.cursor = "s-resize"; 35 } 36 if (0 < target.offsetLeft + w - _startX && target.offsetLeft + w - _startX < size && (0 > target.offsetTop + h - _startY || target.offsetTop + h - _startY > size)) { 37 resizeW = true; 38 resizeH = false; 39 document.body.style.cursor = "w-resize"; 40 } 41 if (0 < target.offsetLeft + w - _startX && target.offsetLeft + w - _startX < size && 0 < target.offsetTop + h - _startY && target.offsetTop + h - _startY < size) { 42 resizeW = true; 43 resizeH = true; 44 document.body.style.cursor = "se-resize"; 45 } 46 $(target).on('mousedown', downHandler); 47 } else { 48 resizeW = false; 49 resizeH = false; 50 $(target).off('mousedown', downHandler); 51 } 52 } 53 54 function downHandler(event) { 55 target = event.target || event.srcElement; 56 var startX = event.clientX + scroll.x; 57 var startY = event.clientY + scroll.y; 58 _startX = parseInt(startX); 59 _startY = parseInt(startY); 60 if (document.addEventListener) { 61 document.addEventListener("mousemove", moveHandler, true); 62 document.addEventListener("mouseup", upHandler, true); 63 } else if (document.attachEvent) { 64 target.setCapture(); 65 target.attachEvent("onlosecapeture", upHandler); 66 target.attachEvent("onmouseup", upHandler); 67 target.attachEvent("onmousemove", moveHandler); 68 } 69 if (event.stopPropagation) { 70 event.stopPropagation(); 71 } else { 72 event.cancelBubble = true; 73 } 74 if (event.preventDefault) { 75 event.preventDefault(); 76 } else { 77 event.returnValue = false; 78 } 79 } 80 81 function moveHandler(e) { 82 if (!e) e = window.event; 83 var w, h; 84 var startX = parseInt(e.clientX + scroll.x); 85 var startY = parseInt(e.clientY + scroll.y); 86 target = target || e.target || e.srcElement; 87 if (target == document.body) { 88 return; 89 } 90 if (resizeW) { 91 deltaX = startX - _startX; 92 w = $(target).width() + deltaX < minSize ? minSize : $(target).width() + deltaX; 93 target.style.width = w + "px"; 94 _startX = startX; 95 } 96 if (resizeH) { 97 deltaY = startY - _startY; 98 h = $(target).height() + deltaY < minSize ? minSize : $(target).height() + deltaY; 99 target.style.height = h + "px"; 100 _startY = startY; 101 } 102 if (e.stopPropagation) { 103 e.stopPropagation(); 104 } else { 105 e.cancelBubble = true; 106 } 107 } 108 109 function upHandler(e) { 110 if (!e) { 111 e = window.event; 112 } 113 resizeW = false; 114 resizeH = false; 115 target = e.target || e.srcElement; 116 $(target).on("mouseout", outHandler); 117 if (document.removeEventListener) { 118 document.removeEventListener("mousemove", moveHandler, true); 119 document.removeEventListener("mouseup", upHandler, true); 120 } else if (document.detachEvent) { 121 target.detachEvent("onlosecapeture", upHandler); 122 target.detachEvent("onmouseup", upHandler); 123 target.detachEvent("onmousemove", moveHandler); 124 target.releaseCapture(); 125 } 126 if (e.stopPropagation) { 127 e.stopPropagation(); 128 } else { 129 e.cancelBubble = true; 130 } 131 } 132 133 function getScrollOffsets(w) { 134 w = w || window; 135 if (w.pageXOffset != null) { 136 return { x: w.pageXOffset, y: w.pageYOffset }; 137 } 138 var d = w.document; 139 if (document.compatMode == "CSS1Compat") { 140 return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop }; 141 } 142 return { x: d.body.scrollLeft, y: d.body.scrollTop }; 143 } 144 } 145 }(jQuery)); 146 147 jQuery("div").dragDivResize();
记录一下今天的劳动成果,可能会有很多不成熟的地方,欢迎大家来指正,谢谢!