农燊高科官方网站
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

drag.js 5.1 KiB

4 vuotta sitten
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. /*!
  2. * drag.js
  3. * Date: 2013-12-06
  4. * https://github.com/aui/artDialog
  5. * (c) 2009-2014 TangBin, http://www.planeArt.cn
  6. *
  7. * This is licensed under the GNU LGPL, version 2.1 or later.
  8. * For details, see: http://www.gnu.org/licenses/lgpl-2.1.html
  9. */
  10. define(function (require) {
  11. var $ = require('jquery');
  12. var $window = $(window);
  13. var $document = $(document);
  14. var isTouch = 'createTouch' in document;
  15. var html = document.documentElement;
  16. var isIE6 = !('minWidth' in html.style);
  17. var isLosecapture = !isIE6 && 'onlosecapture' in html;
  18. var isSetCapture = 'setCapture' in html;
  19. var types = {
  20. start: isTouch ? 'touchstart' : 'mousedown',
  21. over: isTouch ? 'touchmove' : 'mousemove',
  22. end: isTouch ? 'touchend' : 'mouseup'
  23. };
  24. var getEvent = isTouch ? function (event) {
  25. if (!event.touches) {
  26. event = event.originalEvent.touches.item(0);
  27. }
  28. return event;
  29. } : function (event) {
  30. return event;
  31. };
  32. var DragEvent = function () {
  33. this.start = $.proxy(this.start, this);
  34. this.over = $.proxy(this.over, this);
  35. this.end = $.proxy(this.end, this);
  36. this.onstart = this.onover = this.onend = $.noop;
  37. };
  38. DragEvent.types = types;
  39. DragEvent.prototype = {
  40. start: function (event) {
  41. event = this.startFix(event);
  42. $document
  43. .on(types.over, this.over)
  44. .on(types.end, this.end);
  45. this.onstart(event);
  46. return false;
  47. },
  48. over: function (event) {
  49. event = this.overFix(event);
  50. this.onover(event);
  51. return false;
  52. },
  53. end: function (event) {
  54. event = this.endFix(event);
  55. $document
  56. .off(types.over, this.over)
  57. .off(types.end, this.end);
  58. this.onend(event);
  59. return false;
  60. },
  61. startFix: function (event) {
  62. event = getEvent(event);
  63. this.target = $(event.target);
  64. this.selectstart = function () {
  65. return false;
  66. };
  67. $document
  68. .on('selectstart', this.selectstart)
  69. .on('dblclick', this.end);
  70. if (isLosecapture) {
  71. this.target.on('losecapture', this.end);
  72. } else {
  73. $window.on('blur', this.end);
  74. }
  75. if (isSetCapture) {
  76. this.target[0].setCapture();
  77. }
  78. return event;
  79. },
  80. overFix: function (event) {
  81. event = getEvent(event);
  82. return event;
  83. },
  84. endFix: function (event) {
  85. event = getEvent(event);
  86. $document
  87. .off('selectstart', this.selectstart)
  88. .off('dblclick', this.end);
  89. if (isLosecapture) {
  90. this.target.off('losecapture', this.end);
  91. } else {
  92. $window.off('blur', this.end);
  93. }
  94. if (isSetCapture) {
  95. this.target[0].releaseCapture();
  96. }
  97. return event;
  98. }
  99. };
  100. /**
  101. * 启动拖拽
  102. * @param {HTMLElement} 被拖拽的元素
  103. * @param {Event} 触发拖拽的事件对象。可选,若无则监听 elem 的按下事件启动
  104. */
  105. DragEvent.create = function (elem, event) {
  106. var $elem = $(elem);
  107. var dragEvent = new DragEvent();
  108. var startType = DragEvent.types.start;
  109. var noop = function () {};
  110. var className = elem.className
  111. .replace(/^\s|\s.*/g, '') + '-drag-start';
  112. var minX;
  113. var minY;
  114. var maxX;
  115. var maxY;
  116. var api = {
  117. onstart: noop,
  118. onover: noop,
  119. onend: noop,
  120. off: function () {
  121. $elem.off(startType, dragEvent.start);
  122. }
  123. };
  124. dragEvent.onstart = function (event) {
  125. var isFixed = $elem.css('position') === 'fixed';
  126. var dl = $document.scrollLeft();
  127. var dt = $document.scrollTop();
  128. var w = $elem.width();
  129. var h = $elem.height();
  130. minX = 0;
  131. minY = 0;
  132. maxX = isFixed ? $window.width() - w + minX : $document.width() - w;
  133. maxY = isFixed ? $window.height() - h + minY : $document.height() - h;
  134. var offset = $elem.offset();
  135. var left = this.startLeft = isFixed ? offset.left - dl : offset.left;
  136. var top = this.startTop = isFixed ? offset.top - dt : offset.top;
  137. this.clientX = event.clientX;
  138. this.clientY = event.clientY;
  139. $elem.addClass(className);
  140. api.onstart.call(elem, event, left, top);
  141. };
  142. dragEvent.onover = function (event) {
  143. var left = event.clientX - this.clientX + this.startLeft;
  144. var top = event.clientY - this.clientY + this.startTop;
  145. var style = $elem[0].style;
  146. left = Math.max(minX, Math.min(maxX, left));
  147. top = Math.max(minY, Math.min(maxY, top));
  148. style.left = left + 'px';
  149. style.top = top + 'px';
  150. api.onover.call(elem, event, left, top);
  151. };
  152. dragEvent.onend = function (event) {
  153. var position = $elem.position();
  154. var left = position.left;
  155. var top = position.top;
  156. $elem.removeClass(className);
  157. api.onend.call(elem, event, left, top);
  158. };
  159. dragEvent.off = function () {
  160. $elem.off(startType, dragEvent.start);
  161. };
  162. if (event) {
  163. dragEvent.start(event);
  164. } else {
  165. $elem.on(startType, dragEvent.start);
  166. }
  167. return api;
  168. };
  169. return DragEvent;
  170. });