drag.js 14 KB

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