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

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

转载于:https://www.cnblogs.com/jessiecaisme/p/4260333.html