resizable.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1.  (function($){
  2. $.fn.resizable = function(options){
  3. function resize(e){
  4. var resizeData = e.data;
  5. var options = $.data(resizeData.target, 'resizable').options;
  6. if (resizeData.dir.indexOf('e') != -1) {
  7. var width = resizeData.startWidth + e.pageX - resizeData.startX;
  8. width = Math.min(
  9. Math.max(width, options.minWidth),
  10. options.maxWidth
  11. );
  12. resizeData.width = width;
  13. }
  14. if (resizeData.dir.indexOf('s') != -1) {
  15. var height = resizeData.startHeight + e.pageY - resizeData.startY;
  16. height = Math.min(
  17. Math.max(height, options.minHeight),
  18. options.maxHeight
  19. );
  20. resizeData.height = height;
  21. }
  22. if (resizeData.dir.indexOf('w') != -1) {
  23. resizeData.width = resizeData.startWidth - e.pageX + resizeData.startX;
  24. if (resizeData.width >= options.minWidth && resizeData.width <= options.maxWidth) {
  25. resizeData.left = resizeData.startLeft + e.pageX - resizeData.startX;
  26. }
  27. }
  28. if (resizeData.dir.indexOf('n') != -1) {
  29. resizeData.height = resizeData.startHeight - e.pageY + resizeData.startY;
  30. if (resizeData.height >= options.minHeight && resizeData.height <= options.maxHeight) {
  31. resizeData.top = resizeData.startTop + e.pageY - resizeData.startY;
  32. }
  33. }
  34. }
  35. function applySize(e){
  36. var resizeData = e.data;
  37. var target = resizeData.target;
  38. if ($.boxModel == true){
  39. $(target).css({
  40. width: resizeData.width - resizeData.deltaWidth,
  41. height: resizeData.height - resizeData.deltaHeight,
  42. left: resizeData.left,
  43. top: resizeData.top
  44. });
  45. } else {
  46. $(target).css({
  47. width: resizeData.width,
  48. height: resizeData.height,
  49. left: resizeData.left,
  50. top: resizeData.top
  51. });
  52. }
  53. }
  54. function doDown(e){
  55. $.data(e.data.target, 'resizable').options.onStartResize.call(e.data.target, e);
  56. return false;
  57. }
  58. function doMove(e){
  59. resize(e);
  60. if ($.data(e.data.target, 'resizable').options.onResize.call(e.data.target, e) != false){
  61. applySize(e)
  62. }
  63. return false;
  64. }
  65. function doUp(e){
  66. resize(e, true);
  67. applySize(e);
  68. $(document).unbind('.resizable');
  69. $.data(e.data.target, 'resizable').options.onStopResize.call(e.data.target, e);
  70. return false;
  71. }
  72. return this.each(function(){
  73. var opts = null;
  74. var state = $.data(this, 'resizable');
  75. if (state) {
  76. $(this).unbind('.resizable');
  77. opts = $.extend(state.options, options || {});
  78. } else {
  79. opts = $.extend({}, $.fn.resizable.defaults, options || {});
  80. }
  81. if (opts.disabled == true) {
  82. return;
  83. }
  84. $.data(this, 'resizable', {
  85. options: opts
  86. });
  87. var target = this;
  88. // bind mouse event using namespace resizable
  89. $(this).bind('mousemove.resizable', onMouseMove)
  90. .bind('mousedown.resizable', onMouseDown);
  91. function onMouseMove(e) {
  92. var dir = getDirection(e);
  93. if (dir == '') {
  94. $(target).css('cursor', 'default');
  95. } else {
  96. $(target).css('cursor', dir + '-resize');
  97. }
  98. }
  99. function onMouseDown(e) {
  100. var dir = getDirection(e);
  101. if (dir == '') return;
  102. var data = {
  103. target: this,
  104. dir: dir,
  105. startLeft: getCssValue('left'),
  106. startTop: getCssValue('top'),
  107. left: getCssValue('left'),
  108. top: getCssValue('top'),
  109. startX: e.pageX,
  110. startY: e.pageY,
  111. startWidth: $(target).outerWidth(),
  112. startHeight: $(target).outerHeight(),
  113. width: $(target).outerWidth(),
  114. height: $(target).outerHeight(),
  115. deltaWidth: $(target).outerWidth() - $(target).width(),
  116. deltaHeight: $(target).outerHeight() - $(target).height()
  117. };
  118. $(document).bind('mousedown.resizable', data, doDown);
  119. $(document).bind('mousemove.resizable', data, doMove);
  120. $(document).bind('mouseup.resizable', data, doUp);
  121. }
  122. // get the resize direction
  123. function getDirection(e) {
  124. var dir = '';
  125. var offset = $(target).offset();
  126. var width = $(target).outerWidth();
  127. var height = $(target).outerHeight();
  128. var edge = opts.edge;
  129. if (e.pageY > offset.top && e.pageY < offset.top + edge) {
  130. dir += 'n';
  131. } else if (e.pageY < offset.top + height && e.pageY > offset.top + height - edge) {
  132. dir += 's';
  133. }
  134. if (e.pageX > offset.left && e.pageX < offset.left + edge) {
  135. dir += 'w';
  136. } else if (e.pageX < offset.left + width && e.pageX > offset.left + width - edge) {
  137. dir += 'e';
  138. }
  139. var handles = opts.handles.split(',');
  140. for(var i=0; i<handles.length; i++) {
  141. var handle = handles[i].replace(/(^\s*)|(\s*$)/g, '');
  142. if (handle == 'all' || handle == dir) {
  143. return dir;
  144. }
  145. }
  146. return '';
  147. }
  148. function getCssValue(css) {
  149. var val = parseInt($(target).css(css));
  150. if (isNaN(val)) {
  151. return 0;
  152. } else {
  153. return val;
  154. }
  155. }
  156. });
  157. };
  158. $.fn.resizable.defaults = {
  159. disabled:false,
  160. handles:'n, e, s, w, ne, se, sw, nw, all',
  161. minWidth: 10,
  162. minHeight: 10,
  163. maxWidth: 10000,//$(document).width(),
  164. maxHeight: 10000,//$(document).height(),
  165. edge:5,
  166. onStartResize: function(e){},
  167. onResize: function(e){},
  168. onStopResize: function(e){}
  169. };
  170. })(jQuery);