drag.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. $axure.internal(function($ax) {
  2. var widgetDragInfo = new Object();
  3. var _drag = {};
  4. $ax.drag = _drag;
  5. $ax.drag.GetWidgetDragInfo = function() {
  6. return $.extend({}, widgetDragInfo);
  7. };
  8. $ax.drag.StartDragWidget = function(event, id) {
  9. $ax.setjBrowserEvent(jQuery.Event(event));
  10. if(event.donotdrag) return;
  11. var x, y;
  12. var tg;
  13. if(IE_10_AND_BELOW) {
  14. x = window.event.clientX + window.document.documentElement.scrollLeft + window.document.body.scrollLeft;
  15. y = window.event.clientY + window.document.documentElement.scrollTop + window.document.body.scrollTop;
  16. tg = window.event.srcElement;
  17. } else {
  18. if(event.changedTouches) {
  19. x = event.changedTouches[0].pageX;
  20. y = event.changedTouches[0].pageY;
  21. } else {
  22. x = event.pageX;
  23. y = event.pageY;
  24. event.preventDefault();
  25. }
  26. tg = event.target;
  27. }
  28. widgetDragInfo.hasStarted = false;
  29. widgetDragInfo.widgetId = id;
  30. widgetDragInfo.cursorStartX = x;
  31. widgetDragInfo.cursorStartY = y;
  32. widgetDragInfo.lastX = x;
  33. widgetDragInfo.lastY = y;
  34. widgetDragInfo.currentX = x;
  35. widgetDragInfo.currentY = y;
  36. widgetDragInfo.movedWidgets = new Object();
  37. widgetDragInfo.startTime = (new Date()).getTime();
  38. widgetDragInfo.targetWidget = tg;
  39. var movedownName = IE_10_AND_BELOW && $ax.features.supports.windowsMobile ?
  40. $ax.features.eventNames.mouseDownName : $ax.features.eventNames.mouseMoveName;
  41. $ax.event.addEvent(document, movedownName, _dragWidget, true);
  42. $ax.event.addEvent(document, $ax.features.eventNames.mouseUpName, _stopDragWidget, true);
  43. $ax.legacy.SuppressBubble(event);
  44. };
  45. var _dragWidget = function(event) {
  46. $ax.setjBrowserEvent(jQuery.Event(event));
  47. var x, y;
  48. if(IE_10_AND_BELOW) {
  49. x = window.event.clientX + window.document.documentElement.scrollLeft + window.document.body.scrollLeft;
  50. y = window.event.clientY + window.document.documentElement.scrollTop + window.document.body.scrollTop;
  51. } else {
  52. if(event.changedTouches) {
  53. x = event.changedTouches[0].pageX;
  54. y = event.changedTouches[0].pageY;
  55. //allow scroll (defaults) if only swipe events have cases and delta x is less than 5px and not blocking scrolling
  56. var deltaX = x - widgetDragInfo.currentX;
  57. var target = window.document.getElementById(widgetDragInfo.widgetId);
  58. if($ax.event.hasSyntheticEvent(widgetDragInfo.widgetId, "onDrag") || $ax.event.hasSyntheticEvent(widgetDragInfo.widgetId, "onSwipeUp") ||
  59. $ax.event.hasSyntheticEvent(widgetDragInfo.widgetId, "onSwipeDown") || (deltaX * deltaX) > 25
  60. || ($ax.document.configuration.preventScroll && $ax.legacy.GetScrollable(target) == window.document.body)) {
  61. event.preventDefault();
  62. }
  63. } else {
  64. x = event.pageX;
  65. y = event.pageY;
  66. }
  67. }
  68. widgetDragInfo.xDelta = x - widgetDragInfo.currentX;
  69. widgetDragInfo.yDelta = y - widgetDragInfo.currentY;
  70. widgetDragInfo.lastX = widgetDragInfo.currentX;
  71. widgetDragInfo.lastY = widgetDragInfo.currentY;
  72. widgetDragInfo.currentX = x;
  73. widgetDragInfo.currentY = y;
  74. widgetDragInfo.currentTime = (new Date()).getTime();
  75. $ax.legacy.SuppressBubble(event);
  76. if(!widgetDragInfo.hasStarted) {
  77. widgetDragInfo.hasStarted = true;
  78. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onDragStart");
  79. widgetDragInfo.oldBodyCursor = window.document.body.style.cursor;
  80. window.document.body.style.cursor = 'move';
  81. var widget = window.document.getElementById(widgetDragInfo.widgetId);
  82. widgetDragInfo.oldCursor = widget.style.cursor;
  83. widget.style.cursor = 'move';
  84. }
  85. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onDrag");
  86. };
  87. var _suppressClickAfterDrag = function(event) {
  88. _removeSuppressEvents();
  89. $ax.legacy.SuppressBubble(event);
  90. };
  91. var _removeSuppressEvents = function () {
  92. if(IE_10_AND_BELOW) {
  93. $ax.event.removeEvent(event.srcElement, 'click', _suppressClickAfterDrag, undefined, true);
  94. $ax.event.removeEvent(widgetDragInfo.targetWidget, 'mousemove', _removeSuppressEvents, undefined, true);
  95. } else {
  96. $ax.event.removeEvent(document, "click", _suppressClickAfterDrag, true);
  97. $ax.event.removeEvent(document, 'mousemove', _removeSuppressEvents, true);
  98. }
  99. };
  100. var _stopDragWidget = function(event) {
  101. $ax.setjBrowserEvent(jQuery.Event(event));
  102. var tg;
  103. var movedownName = IE_10_AND_BELOW && $ax.features.supports.windowsMobile ?
  104. $ax.features.eventNames.mouseDownName : $ax.features.eventNames.mouseMoveName;
  105. $ax.event.removeEvent(document, movedownName, _dragWidget, true);
  106. $ax.event.removeEvent(document, $ax.features.eventNames.mouseUpName, _stopDragWidget, true);
  107. tg = IE_10_AND_BELOW ? window.event.srcElement : event.target;
  108. if(widgetDragInfo.hasStarted) {
  109. widgetDragInfo.currentTime = (new Date()).getTime();
  110. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onDragDrop");
  111. if($ax.globalVariableProvider.getVariableValue('totaldragx') < -30 && $ax.globalVariableProvider.getVariableValue('dragtime') < 1000) {
  112. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onSwipeLeft");
  113. }
  114. if($ax.globalVariableProvider.getVariableValue('totaldragx') > 30 && $ax.globalVariableProvider.getVariableValue('dragtime') < 1000) {
  115. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onSwipeRight");
  116. }
  117. var totalDragY = $ax.globalVariableProvider.getVariableValue('totaldragy');
  118. if(totalDragY < -30 && $ax.globalVariableProvider.getVariableValue('dragtime') < 1000) {
  119. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onSwipeUp");
  120. }
  121. if(totalDragY > 30 && $ax.globalVariableProvider.getVariableValue('dragtime') < 1000) {
  122. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onSwipeDown");
  123. }
  124. window.document.body.style.cursor = widgetDragInfo.oldBodyCursor;
  125. var widget = window.document.getElementById(widgetDragInfo.widgetId);
  126. // It may be null if OnDragDrop filtered out the widget
  127. if(widget != null) widget.style.cursor = widgetDragInfo.oldCursor;
  128. if(widgetDragInfo.targetWidget == tg && !event.changedTouches) {
  129. // suppress the click after the drag on desktop browsers
  130. if(IE_10_AND_BELOW && widgetDragInfo.targetWidget) {
  131. $ax.event.addEvent(widgetDragInfo.targetWidget, 'click', _suppressClickAfterDrag, true, true);
  132. $ax.event.addEvent(widgetDragInfo.targetWidget, "onmousemove", _removeSuppressEvents, true, true);
  133. } else {
  134. $ax.event.addEvent(document, "click", _suppressClickAfterDrag, true);
  135. $ax.event.addEvent(document, "mousemove", _removeSuppressEvents, true);
  136. }
  137. }
  138. }
  139. widgetDragInfo.hasStarted = false;
  140. widgetDragInfo.movedWidgets = new Object();
  141. return false;
  142. };
  143. $ax.drag.GetDragX = function() {
  144. if(widgetDragInfo.hasStarted) return widgetDragInfo.xDelta;
  145. return 0;
  146. };
  147. $ax.drag.GetDragY = function() {
  148. if(widgetDragInfo.hasStarted) return widgetDragInfo.yDelta;
  149. return 0;
  150. };
  151. $ax.drag.GetTotalDragX = function() {
  152. if(widgetDragInfo.hasStarted) return widgetDragInfo.currentX - widgetDragInfo.cursorStartX;
  153. return 0;
  154. };
  155. $ax.drag.GetTotalDragY = function() {
  156. if(widgetDragInfo.hasStarted) return widgetDragInfo.currentY - widgetDragInfo.cursorStartY;
  157. return 0;
  158. };
  159. $ax.drag.GetDragTime = function() {
  160. if(widgetDragInfo.hasStarted) return widgetDragInfo.currentTime - widgetDragInfo.startTime;
  161. return 600000;
  162. };
  163. $ax.drag.LogMovedWidgetForDrag = function (id, dragInfo) {
  164. dragInfo = dragInfo || widgetDragInfo;
  165. if(dragInfo.hasStarted) {
  166. var containerIndex = id.indexOf('_container');
  167. if(containerIndex != -1) id = id.substring(0, containerIndex);
  168. // If state or other non-widget id, this should not be dragged, and should exit out to avoid exceptions.
  169. if(!$obj(id)) return;
  170. var query = $ax('#' + id);
  171. //var x = query.left();
  172. //var y = query.top();
  173. var viewportLocation = query.viewportLocation();
  174. var x = viewportLocation.left;
  175. var y = viewportLocation.top;
  176. var movedWidgets = dragInfo.movedWidgets;
  177. if(!movedWidgets[id]) {
  178. movedWidgets[id] = new Location(x, y);
  179. }
  180. }
  181. };
  182. var Location = function(x, y) {
  183. this.x = x;
  184. this.y = y;
  185. };
  186. $ax.drag.location = Location;
  187. var Rectangle = $ax.drag.Rectangle = function(x, y, width, height) {
  188. this.x = x;
  189. this.y = y;
  190. this.width = width;
  191. this.height = height;
  192. this.right = x + width;
  193. this.bottom = y + height;
  194. };
  195. Rectangle.prototype.IntersectsWith = function(rect) {
  196. if(this.Invalid()) return false;
  197. if(rect.length) {
  198. for(var i = 0; i < rect.length; i++) if(!rect[i].Invalid && this.IntersectsWith(rect[i])) return true;
  199. return false;
  200. }
  201. if(rect.Invalid()) return false;
  202. return this.x < rect.right && this.right > rect.x && this.y < rect.bottom && this.bottom > rect.y;
  203. };
  204. Rectangle.prototype.Invalid = function() {
  205. return this.x == -1 && this.y == -1 && this.width == -1 && this.height == -1;
  206. };
  207. Rectangle.prototype.Move = function(x, y) {
  208. return new Rectangle(x, y, this.width, this.height);
  209. };
  210. });