拖拽调整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();

View Code

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