jquery-resizable.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. /// <reference path="jquery.js" />
  2. /*
  3. jquery-resizable
  4. Version 0.17 - 3/31/2016
  5. © 2015 Rick Strahl, West Wind Technologies
  6. www.west-wind.com
  7. Licensed under MIT License
  8. */
  9. (function($, undefined) {
  10. function getHandle(selector, $el) {
  11. if (selector.trim()[0] === ">") {
  12. selector = selector.trim().replace(/^>\s*/, "");
  13. return $el.find(selector);
  14. }
  15. return selector ? $(selector) : $el;
  16. }
  17. if ($.fn.resizable)
  18. return;
  19. $.fn.resizable = function fnResizable(options) {
  20. var opt = {
  21. // selector for handle that starts dragging
  22. handleSelector: null,
  23. // resize the width
  24. resizeWidth: true,
  25. // resize the height
  26. resizeHeight: true,
  27. // the side that the width resizing is relative to
  28. resizeWidthFrom: 'right',
  29. // the side that the height resizing is relative to
  30. resizeHeightFrom: 'bottom',
  31. // hook into start drag operation (event passed)
  32. onDragStart: null,
  33. // hook into stop drag operation (event passed)
  34. onDragEnd: null,
  35. // hook into each drag operation (event passed)
  36. onDrag: null,
  37. // disable touch-action on $handle
  38. // prevents browser level actions like forward back gestures
  39. touchActionNone: true
  40. };
  41. if (typeof options == "object") opt = $.extend(opt, options);
  42. return this.each(function () {
  43. var startPos, startTransition;
  44. var $el = $(this);
  45. var $handle = getHandle(opt.handleSelector, $el);
  46. if (opt.touchActionNone)
  47. $handle.css("touch-action", "none");
  48. $el.addClass("resizable");
  49. $handle.bind('mousedown.rsz touchstart.rsz', startDragging);
  50. function noop(e) {
  51. e.stopPropagation();
  52. e.preventDefault();
  53. };
  54. function startDragging(e) {
  55. startPos = getMousePos(e);
  56. startPos.width = parseInt($el.width(), 10);
  57. startPos.height = parseInt($el.height(), 10);
  58. startTransition = $el.css("transition");
  59. $el.css("transition", "none");
  60. if (opt.onDragStart) {
  61. if (opt.onDragStart(e, $el, opt) === false)
  62. return;
  63. }
  64. opt.dragFunc = doDrag;
  65. $(document).bind('mousemove.rsz', opt.dragFunc);
  66. $(document).bind('mouseup.rsz', stopDragging);
  67. if (window.Touch || navigator.maxTouchPoints) {
  68. $(document).bind('touchmove.rsz', opt.dragFunc);
  69. $(document).bind('touchend.rsz', stopDragging);
  70. }
  71. $(document).bind('selectstart.rsz', noop); // disable selection
  72. }
  73. function doDrag(e) {
  74. var pos = getMousePos(e), newWidth, newHeight;
  75. if (opt.resizeWidthFrom === 'left')
  76. newWidth = startPos.width - pos.x + startPos.x;
  77. else
  78. newWidth = startPos.width + pos.x - startPos.x;
  79. if (opt.resizeHeightFrom === 'top')
  80. newHeight = startPos.height - pos.y + startPos.y;
  81. else
  82. newHeight = startPos.height + pos.y - startPos.y;
  83. if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) {
  84. if (opt.resizeHeight)
  85. $el.height(newHeight);
  86. if (opt.resizeWidth)
  87. $el.width(newWidth);
  88. }
  89. }
  90. function stopDragging(e) {
  91. e.stopPropagation();
  92. e.preventDefault();
  93. $(document).unbind('mousemove.rsz', opt.dragFunc);
  94. $(document).unbind('mouseup.rsz', stopDragging);
  95. if (window.Touch || navigator.maxTouchPoints) {
  96. $(document).unbind('touchmove.rsz', opt.dragFunc);
  97. $(document).unbind('touchend.rsz', stopDragging);
  98. }
  99. $(document).unbind('selectstart.rsz', noop);
  100. // reset changed values
  101. $el.css("transition", startTransition);
  102. if (opt.onDragEnd)
  103. opt.onDragEnd(e, $el, opt);
  104. return false;
  105. }
  106. function getMousePos(e) {
  107. var pos = { x: 0, y: 0, width: 0, height: 0 };
  108. if (typeof e.clientX === "number") {
  109. pos.x = e.clientX;
  110. pos.y = e.clientY;
  111. } else if (e.originalEvent.touches) {
  112. pos.x = e.originalEvent.touches[0].clientX;
  113. pos.y = e.originalEvent.touches[0].clientY;
  114. } else
  115. return null;
  116. return pos;
  117. }
  118. });
  119. };
  120. })(jQuery,undefined);