drag.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  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) {
  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. if(IE) {
  40. if($ax.features.supports.windowsMobile) {
  41. window.document.attachEvent($ax.features.eventNames.mouseDownName, _dragWidget);
  42. window.document.attachEvent($ax.features.eventNames.mouseUpName, _stopDragWidget);
  43. } else {
  44. window.document.attachEvent('on' + $ax.features.eventNames.mouseMoveName, _dragWidget);
  45. window.document.attachEvent('on' + $ax.features.eventNames.mouseUpName, _stopDragWidget);
  46. }
  47. } else {
  48. window.document.addEventListener($ax.features.eventNames.mouseMoveName, _dragWidget, true);
  49. window.document.addEventListener($ax.features.eventNames.mouseUpName, _stopDragWidget, true);
  50. }
  51. $ax.legacy.SuppressBubble(event);
  52. };
  53. var _dragWidget = function(event) {
  54. $ax.setjBrowserEvent(jQuery.Event(event));
  55. var x, y;
  56. if(IE) {
  57. x = window.event.clientX + window.document.documentElement.scrollLeft + window.document.body.scrollLeft;
  58. y = window.event.clientY + window.document.documentElement.scrollTop + window.document.body.scrollTop;
  59. } else {
  60. if(event.changedTouches) {
  61. x = event.changedTouches[0].pageX;
  62. y = event.changedTouches[0].pageY;
  63. //allow scroll (defaults) if only swipe events have cases and delta x is less than 5px and not blocking scrolling
  64. var deltaX = x - widgetDragInfo.currentX;
  65. var target = window.document.getElementById(widgetDragInfo.widgetId);
  66. if($ax.event.hasSyntheticEvent(widgetDragInfo.widgetId, "onDrag") || $ax.event.hasSyntheticEvent(widgetDragInfo.widgetId, "onSwipeUp") ||
  67. $ax.event.hasSyntheticEvent(widgetDragInfo.widgetId, "onSwipeDown") || (deltaX * deltaX) > 25
  68. || ($ax.document.configuration.preventScroll && $ax.legacy.GetScrollable(target) == window.document.body)) {
  69. event.preventDefault();
  70. }
  71. } else {
  72. x = event.pageX;
  73. y = event.pageY;
  74. }
  75. }
  76. widgetDragInfo.xDelta = x - widgetDragInfo.currentX;
  77. widgetDragInfo.yDelta = y - widgetDragInfo.currentY;
  78. widgetDragInfo.lastX = widgetDragInfo.currentX;
  79. widgetDragInfo.lastY = widgetDragInfo.currentY;
  80. widgetDragInfo.currentX = x;
  81. widgetDragInfo.currentY = y;
  82. widgetDragInfo.currentTime = (new Date()).getTime();
  83. $ax.legacy.SuppressBubble(event);
  84. if(!widgetDragInfo.hasStarted) {
  85. widgetDragInfo.hasStarted = true;
  86. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onDragStart");
  87. widgetDragInfo.oldBodyCursor = window.document.body.style.cursor;
  88. window.document.body.style.cursor = 'move';
  89. var widget = window.document.getElementById(widgetDragInfo.widgetId);
  90. widgetDragInfo.oldCursor = widget.style.cursor;
  91. widget.style.cursor = 'move';
  92. }
  93. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onDrag");
  94. };
  95. var _suppressClickAfterDrag = function(event) {
  96. _removeSuppressEvents();
  97. $ax.legacy.SuppressBubble(event);
  98. };
  99. var _removeSuppressEvents = function() {
  100. if(IE) {
  101. window.event.srcElement.detachEvent("onclick", _suppressClickAfterDrag);
  102. widgetDragInfo.targetWidget.detachEvent("onmousemove", _removeSuppressEvents);
  103. } else {
  104. window.document.removeEventListener("click", _suppressClickAfterDrag, true);
  105. window.document.removeEventListener("mousemove", _removeSuppressEvents, true);
  106. }
  107. };
  108. var _stopDragWidget = function(event) {
  109. $ax.setjBrowserEvent(jQuery.Event(event));
  110. var tg;
  111. if(IE) {
  112. if($ax.features.supports.windowsMobile) {
  113. window.document.detachEvent($ax.features.eventNames.mouseDownName, _dragWidget);
  114. window.document.detachEvent($ax.features.eventNames.mouseUpName, _stopDragWidget);
  115. } else {
  116. window.document.detachEvent('on' + $ax.features.eventNames.mouseMoveName, _dragWidget);
  117. window.document.detachEvent('on' + $ax.features.eventNames.mouseUpName, _stopDragWidget);
  118. }
  119. tg = window.event.srcElement;
  120. } else {
  121. window.document.removeEventListener($ax.features.eventNames.mouseMoveName, _dragWidget, true);
  122. window.document.removeEventListener($ax.features.eventNames.mouseUpName, _stopDragWidget, true);
  123. tg = event.target;
  124. }
  125. if(widgetDragInfo.hasStarted) {
  126. widgetDragInfo.currentTime = (new Date()).getTime();
  127. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onDragDrop");
  128. if($ax.globalVariableProvider.getVariableValue('totaldragx') < -30 && $ax.globalVariableProvider.getVariableValue('dragtime') < 1000) {
  129. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onSwipeLeft");
  130. }
  131. if($ax.globalVariableProvider.getVariableValue('totaldragx') > 30 && $ax.globalVariableProvider.getVariableValue('dragtime') < 1000) {
  132. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onSwipeRight");
  133. }
  134. var totalDragY = $ax.globalVariableProvider.getVariableValue('totaldragy');
  135. if(totalDragY < -30 && $ax.globalVariableProvider.getVariableValue('dragtime') < 1000) {
  136. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onSwipeUp");
  137. }
  138. if(totalDragY > 30 && $ax.globalVariableProvider.getVariableValue('dragtime') < 1000) {
  139. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onSwipeDown");
  140. }
  141. window.document.body.style.cursor = widgetDragInfo.oldBodyCursor;
  142. var widget = window.document.getElementById(widgetDragInfo.widgetId);
  143. // It may be null if OnDragDrop filtered out the widget
  144. if(widget != null) widget.style.cursor = widgetDragInfo.oldCursor;
  145. if(widgetDragInfo.targetWidget == tg && !event.changedTouches) {
  146. // suppress the click after the drag on desktop browsers
  147. if(IE && widgetDragInfo.targetWidget) {
  148. widgetDragInfo.targetWidget.attachEvent("onclick", _suppressClickAfterDrag);
  149. } else {
  150. window.document.addEventListener("click", _suppressClickAfterDrag, true);
  151. }
  152. if(IE && widgetDragInfo.targetWidget) {
  153. widgetDragInfo.targetWidget.attachEvent("onmousemove", _removeSuppressEvents);
  154. } else {
  155. window.document.addEventListener("mousemove", _removeSuppressEvents, true);
  156. }
  157. }
  158. }
  159. widgetDragInfo.hasStarted = false;
  160. widgetDragInfo.movedWidgets = new Object();
  161. return false;
  162. };
  163. $ax.drag.GetDragX = function() {
  164. if(widgetDragInfo.hasStarted) return widgetDragInfo.xDelta;
  165. return 0;
  166. };
  167. $ax.drag.GetDragY = function() {
  168. if(widgetDragInfo.hasStarted) return widgetDragInfo.yDelta;
  169. return 0;
  170. };
  171. $ax.drag.GetTotalDragX = function() {
  172. if(widgetDragInfo.hasStarted) return widgetDragInfo.currentX - widgetDragInfo.cursorStartX;
  173. return 0;
  174. };
  175. $ax.drag.GetTotalDragY = function() {
  176. if(widgetDragInfo.hasStarted) return widgetDragInfo.currentY - widgetDragInfo.cursorStartY;
  177. return 0;
  178. };
  179. $ax.drag.GetDragTime = function() {
  180. if(widgetDragInfo.hasStarted) return widgetDragInfo.currentTime - widgetDragInfo.startTime;
  181. return 600000;
  182. };
  183. // $ax.drag.GetCursorRectangles = function() {
  184. // var rects = new Object();
  185. // rects.lastRect = new Rectangle($ax.lastMouseLocation.x, $ax.lastMouseLocation.y, 1, 1);
  186. // rects.currentRect = new Rectangle($ax.mouseLocation.x, $ax.mouseLocation.y, 1, 1);
  187. // return rects;
  188. // };
  189. // $ax.drag.GetWidgetRectangles = function(id) {
  190. // var widget = window.document.getElementById(id);
  191. // var rects = new Object();
  192. // rects.lastRect = new Rectangle($ax.legacy.getAbsoluteLeft(widget), $ax.legacy.getAbsoluteTop(widget), Number($('#' + id).css('width').replace("px", "")), Number($('#' + id).css('height').replace("px", "")));
  193. // rects.currentRect = rects.lastRect;
  194. // return rects;
  195. // };
  196. // $ax.drag.IsEntering = function(movingRects, targetRects) {
  197. // return !movingRects.lastRect.IntersectsWith(targetRects.currentRect) && movingRects.currentRect.IntersectsWith(targetRects.currentRect);
  198. // };
  199. // $ax.drag.IsLeaving = function(movingRects, targetRects) {
  200. // return movingRects.lastRect.IntersectsWith(targetRects.currentRect) && !movingRects.currentRect.IntersectsWith(targetRects.currentRect);
  201. // };
  202. // function IsOver(movingRects, targetRects) {
  203. // return movingRects.currentRect.IntersectsWith(targetRects.currentRect);
  204. // }
  205. // function IsNotOver(movingRects, targetRects) {
  206. // return !IsOver(movingRects, targetRects);
  207. // }
  208. $ax.drag.LogMovedWidgetForDrag = function(id) {
  209. if(widgetDragInfo.hasStarted) {
  210. var widget = $('#' + id);
  211. var y = Number(widget.css('top').replace("px", ""));
  212. var x = Number(widget.css('left').replace("px", ""));
  213. var movedWidgets = widgetDragInfo.movedWidgets;
  214. if(!movedWidgets[id]) {
  215. movedWidgets[id] = new Location(x, y);
  216. }
  217. }
  218. };
  219. var Location = function(x, y) {
  220. this.x = x;
  221. this.y = y;
  222. };
  223. $ax.drag.location = Location;
  224. var Rectangle = $ax.drag.Rectangle = function(x, y, width, height) {
  225. this.x = x;
  226. this.y = y;
  227. this.width = width;
  228. this.height = height;
  229. this.right = x + width;
  230. this.bottom = y + height;
  231. };
  232. Rectangle.prototype.IntersectsWith = function(rect) {
  233. if(this.Invalid()) return false;
  234. if(rect.length) {
  235. for(var i = 0; i < rect.length; i++) if(!rect[i].Invalid && this.IntersectsWith(rect[i])) return true;
  236. return false;
  237. }
  238. if(rect.Invalid()) return false;
  239. return this.x < rect.right && this.right > rect.x && this.y < rect.bottom && this.bottom > rect.y;
  240. };
  241. Rectangle.prototype.Invalid = function() {
  242. return this.x == -1 && this.y == -1 && this.width == -1 && this.height == -1;
  243. };
  244. Rectangle.prototype.Move = function(x, y) {
  245. return new Rectangle(x, y, this.width, this.height);
  246. };
  247. });