拖拽调整Div大小

今天写了一天这个jquery插件：

可以实现对div进行拖拽来调整大小的功能。

  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();

记录一下今天的劳动成果，可能会有很多不成熟的地方，欢迎大家来指正，谢谢！