dragDivResize.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  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. for (var i = 0; i < _this.length; i++) {
  10. var target = this[i];
  11. $(target).on("mouseover mousemove", overHandler);
  12. }
  13. function outHandler() {
  14. for (var i = 0; i < _this.length; i++) {
  15. target.style.outline = "none";
  16. }
  17. document.body.style.cursor = "default";
  18. }
  19. function overHandler(event) {
  20. target = event.target || event.srcElement;
  21. var startX = event.clientX + scroll.x;
  22. var startY = event.clientY + scroll.y;
  23. var w = $(target).width();
  24. var h = $(target).height();
  25. _startX = parseInt(startX);
  26. _startY = parseInt(startY);
  27. if ((0 < target.offsetLeft + w - _startX && target.offsetLeft + w - _startX < size) || (0 < target.offsetTop + h - _startY && target.offsetTop + h - _startY < size)) {
  28. target.style.outline = "1px solid #438eb9";
  29. if ((0 > target.offsetLeft + w - _startX || target.offsetLeft + w - _startX > size) && 0 < target.offsetTop + h - _startY && target.offsetTop + h - _startY < size) {
  30. resizeW = false;
  31. resizeH = true;
  32. document.body.style.cursor = "s-resize";
  33. }
  34. if (0 < target.offsetLeft + w - _startX && target.offsetLeft + w - _startX < size && (0 > target.offsetTop + h - _startY || target.offsetTop + h - _startY > size)) {
  35. resizeW = true;
  36. resizeH = false;
  37. document.body.style.cursor = "w-resize";
  38. }
  39. if (0 < target.offsetLeft + w - _startX && target.offsetLeft + w - _startX < size && 0 < target.offsetTop + h - _startY && target.offsetTop + h - _startY < size) {
  40. resizeW = true;
  41. resizeH = true;
  42. document.body.style.cursor = "se-resize";
  43. }
  44. $(target).on('mousedown', downHandler);
  45. } else {
  46. resizeW = false;
  47. resizeH = false;
  48. $(target).off('mousedown', downHandler);
  49. }
  50. }
  51. function downHandler(event) {
  52. target = event.target || event.srcElement;
  53. var startX = event.clientX + scroll.x;
  54. var startY = event.clientY + scroll.y;
  55. _startX = parseInt(startX);
  56. _startY = parseInt(startY);
  57. if (document.addEventListener) {
  58. document.addEventListener("mousemove", moveHandler, true);
  59. document.addEventListener("mouseup", upHandler, true);
  60. } else if (document.attachEvent) {
  61. target.setCapture();
  62. target.attachEvent("onlosecapeture", upHandler);
  63. target.attachEvent("onmouseup", upHandler);
  64. target.attachEvent("onmousemove", moveHandler);
  65. }
  66. if (event.stopPropagation) {
  67. event.stopPropagation();
  68. } else {
  69. event.cancelBubble = true;
  70. }
  71. if (event.preventDefault) {
  72. event.preventDefault();
  73. } else {
  74. event.returnValue = false;
  75. }
  76. }
  77. function moveHandler(e) {
  78. if (!e) e = window.event;
  79. var w, h;
  80. var startX = parseInt(e.clientX + scroll.x);
  81. var startY = parseInt(e.clientY + scroll.y);
  82. target = target || e.target || e.srcElement;
  83. if (target == document.body) {
  84. return;
  85. }
  86. if (resizeW) {
  87. deltaX = startX - _startX;
  88. w = $(target).width() + deltaX < minSize ? minSize : $(target).width() + deltaX;
  89. target.style.width = w + "px";
  90. _startX = startX;
  91. }
  92. if (resizeH) {
  93. deltaY = startY - _startY;
  94. h = $(target).height() + deltaY < minSize ? minSize : $(target).height() + deltaY;
  95. target.style.height = h + "px";
  96. _startY = startY;
  97. }
  98. if (e.stopPropagation) {
  99. e.stopPropagation();
  100. } else {
  101. e.cancelBubble = true;
  102. }
  103. }
  104. function upHandler(e) {
  105. if (!e) {
  106. e = window.event;
  107. }
  108. resizeW = false;
  109. resizeH = false;
  110. target = e.target || e.srcElement;
  111. $(target).on("mouseout", outHandler);
  112. if (document.removeEventListener) {
  113. document.removeEventListener("mousemove", moveHandler, true);
  114. document.removeEventListener("mouseup", upHandler, true);
  115. } else if (document.detachEvent) {
  116. target.detachEvent("onlosecapeture", upHandler);
  117. target.detachEvent("onmouseup", upHandler);
  118. target.detachEvent("onmousemove", moveHandler);
  119. target.releaseCapture();
  120. }
  121. if (e.stopPropagation) {
  122. e.stopPropagation();
  123. } else {
  124. e.cancelBubble = true;
  125. }
  126. }
  127. function getScrollOffsets(w) {
  128. w = w || window;
  129. if (w.pageXOffset != null) {
  130. return { x: w.pageXOffset, y: w.pageYOffset };
  131. }
  132. var d = w.document;
  133. if (document.compatMode == "CSS1Compat") {
  134. return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop };
  135. }
  136. return { x: d.body.scrollLeft, y: d.body.scrollTop };
  137. }
  138. }
  139. }(jQuery));