产品原型
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.

277 lines
12 KiB

4 years ago
  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. //we should only start drag on one target, otherwise the _dragWidget and _stopDragWidget events from multiple targets will be conflicted
  11. if(event.donotdrag || widgetDragInfo.started) return;
  12. var x, y;
  13. var tg;
  14. if(IE_10_AND_BELOW) {
  15. x = window.event.clientX + window.document.documentElement.scrollLeft + window.document.body.scrollLeft;
  16. y = window.event.clientY + window.document.documentElement.scrollTop + window.document.body.scrollTop;
  17. tg = window.event.srcElement;
  18. } else {
  19. if(event.changedTouches) {
  20. x = event.changedTouches[0].pageX;
  21. y = event.changedTouches[0].pageY;
  22. } else {
  23. x = event.pageX;
  24. y = event.pageY;
  25. event.preventDefault();
  26. }
  27. tg = event.target;
  28. }
  29. widgetDragInfo.started = true;
  30. widgetDragInfo.hasDragged= false;
  31. widgetDragInfo.widgetId = id;
  32. widgetDragInfo.cursorStartX = x;
  33. widgetDragInfo.cursorStartY = y;
  34. widgetDragInfo.lastX = x;
  35. widgetDragInfo.lastY = y;
  36. widgetDragInfo.currentX = x;
  37. widgetDragInfo.currentY = y;
  38. widgetDragInfo.movedWidgets = new Object();
  39. widgetDragInfo.startTime = (new Date()).getTime();
  40. widgetDragInfo.targetWidget = tg;
  41. var movedownName = IE_10_AND_BELOW && $ax.features.supports.windowsMobile ?
  42. $ax.features.eventNames.mouseDownName : $ax.features.eventNames.mouseMoveName;
  43. $ax.event.addEvent(document, movedownName, _dragWidget, true);
  44. $ax.event.addEvent(document, $ax.features.eventNames.mouseUpName, _stopDragWidget, true);
  45. //$ax.legacy.SuppressBubble(event);
  46. };
  47. var _dragWidget = function(event) {
  48. $ax.setjBrowserEvent(jQuery.Event(event));
  49. var x, y;
  50. if(IE_10_AND_BELOW) {
  51. x = window.event.clientX + window.document.documentElement.scrollLeft + window.document.body.scrollLeft;
  52. y = window.event.clientY + window.document.documentElement.scrollTop + window.document.body.scrollTop;
  53. } else {
  54. if(event.changedTouches) {
  55. x = event.changedTouches[0].pageX;
  56. y = event.changedTouches[0].pageY;
  57. //allow scroll (defaults) if only swipe events have cases and delta x is less than 5px and not blocking scrolling
  58. var deltaX = x - widgetDragInfo.currentX;
  59. var target = window.document.getElementById(widgetDragInfo.widgetId);
  60. if($ax.event.hasSyntheticEvent(widgetDragInfo.widgetId, "onDrag") || $ax.event.hasSyntheticEvent(widgetDragInfo.widgetId, "onSwipeUp") ||
  61. $ax.event.hasSyntheticEvent(widgetDragInfo.widgetId, "onSwipeDown") || (deltaX * deltaX) > 25
  62. || ($ax.document.configuration.preventScroll && $ax.legacy.GetScrollable(target) == window.document.body)) {
  63. event.preventDefault();
  64. }
  65. } else {
  66. x = event.pageX;
  67. y = event.pageY;
  68. }
  69. }
  70. widgetDragInfo.xDelta = x - widgetDragInfo.currentX;
  71. widgetDragInfo.yDelta = y - widgetDragInfo.currentY;
  72. widgetDragInfo.lastX = widgetDragInfo.currentX;
  73. widgetDragInfo.lastY = widgetDragInfo.currentY;
  74. widgetDragInfo.currentX = x;
  75. widgetDragInfo.currentY = y;
  76. widgetDragInfo.currentTime = (new Date()).getTime();
  77. // $ax.legacy.SuppressBubble(event);
  78. if(!widgetDragInfo.hasDragged) {
  79. widgetDragInfo.hasDragged = true;
  80. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onDragStart");
  81. //only update to move cursor is we are moving objects
  82. if($ax.event.hasSyntheticEvent(widgetDragInfo.widgetId, "onDrag")) {
  83. widgetDragInfo.cursorChanged = true;
  84. widgetDragInfo.oldBodyCursor = window.document.body.style.cursor;
  85. window.document.body.style.cursor = 'move';
  86. widgetDragInfo.oldCursor = widget.style.cursor;
  87. var widget = window.document.getElementById(widgetDragInfo.widgetId);
  88. widget.style.cursor = 'move';
  89. //need to do this in order to change the cursor under nice scroll
  90. var niceScrollContainer = $ax.adaptive.getNiceScrollContainer(widget);
  91. if(niceScrollContainer) {
  92. widgetDragInfo.oldNiceScrollContainerCursor = niceScrollContainer.style.cursor;
  93. niceScrollContainer.style.cursor = 'move';
  94. }
  95. }
  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. if(widgetDragInfo.hasDragged) {
  121. widgetDragInfo.currentTime = (new Date()).getTime();
  122. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onDragDrop");
  123. if($ax.globalVariableProvider.getVariableValue('totaldragx') < -30 && $ax.globalVariableProvider.getVariableValue('dragtime') < 1000) {
  124. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onSwipeLeft");
  125. }
  126. if($ax.globalVariableProvider.getVariableValue('totaldragx') > 30 && $ax.globalVariableProvider.getVariableValue('dragtime') < 1000) {
  127. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onSwipeRight");
  128. }
  129. var totalDragY = $ax.globalVariableProvider.getVariableValue('totaldragy');
  130. if(totalDragY < -30 && $ax.globalVariableProvider.getVariableValue('dragtime') < 1000) {
  131. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onSwipeUp");
  132. }
  133. if(totalDragY > 30 && $ax.globalVariableProvider.getVariableValue('dragtime') < 1000) {
  134. $ax.event.raiseSyntheticEvent(widgetDragInfo.widgetId, "onSwipeDown");
  135. }
  136. if(widgetDragInfo.cursorChanged) {
  137. window.document.body.style.cursor = widgetDragInfo.oldBodyCursor;
  138. var widget = window.document.getElementById(widgetDragInfo.widgetId);
  139. // It may be null if OnDragDrop filtered out the widget
  140. if(widget != null) widget.style.cursor = widgetDragInfo.oldCursor;
  141. //we don't seems need to reset nicescroll cursor on container, nicescroll seems updates its cursor
  142. // if(widgetDragInfo.oldNiceScrollContainerCursor != undefined) {
  143. // var niceScrollContainer = $ax.adaptive.getNiceScrollContainer(widget);
  144. // if(niceScrollContainer) niceScrollContainer.style.cursor = widgetDragInfo.oldNiceScrollContainerCursor;
  145. // widgetDragInfo.oldNiceScrollContainerCursor = undefined;
  146. // }
  147. widgetDragInfo.cursorChanged = undefined;
  148. }
  149. if(widgetDragInfo.targetWidget == tg && !event.changedTouches) {
  150. // suppress the click after the drag on desktop browsers
  151. if(IE_10_AND_BELOW && widgetDragInfo.targetWidget) {
  152. $ax.event.addEvent(widgetDragInfo.targetWidget, 'click', _suppressClickAfterDrag, true, true);
  153. $ax.event.addEvent(widgetDragInfo.targetWidget, "onmousemove", _removeSuppressEvents, true, true);
  154. } else {
  155. $ax.event.addEvent(document, "click", _suppressClickAfterDrag, true);
  156. $ax.event.addEvent(document, "mousemove", _removeSuppressEvents, true);
  157. }
  158. }
  159. }
  160. widgetDragInfo.hasDragged = false;
  161. widgetDragInfo.movedWidgets = new Object();
  162. widgetDragInfo.started = false;
  163. return false;
  164. };
  165. $ax.drag.GetDragX = function() {
  166. if(widgetDragInfo.hasDragged) return widgetDragInfo.xDelta;
  167. return 0;
  168. };
  169. $ax.drag.GetDragY = function() {
  170. if(widgetDragInfo.hasDragged) return widgetDragInfo.yDelta;
  171. return 0;
  172. };
  173. $ax.drag.GetTotalDragX = function() {
  174. if(widgetDragInfo.hasDragged) return widgetDragInfo.currentX - widgetDragInfo.cursorStartX;
  175. return 0;
  176. };
  177. $ax.drag.GetTotalDragY = function() {
  178. if(widgetDragInfo.hasDragged) return widgetDragInfo.currentY - widgetDragInfo.cursorStartY;
  179. return 0;
  180. };
  181. $ax.drag.GetDragTime = function() {
  182. if(widgetDragInfo.hasDragged) return widgetDragInfo.currentTime - widgetDragInfo.startTime;
  183. return 600000;
  184. };
  185. $ax.drag.LogMovedWidgetForDrag = function (id, dragInfo) {
  186. dragInfo = dragInfo || widgetDragInfo;
  187. if(dragInfo.hasDragged) {
  188. var containerIndex = id.indexOf('_container');
  189. if(containerIndex != -1) id = id.substring(0, containerIndex);
  190. // If state or other non-widget id, this should not be dragged, and should exit out to avoid exceptions.
  191. if(!$obj(id)) return;
  192. var query = $ax('#' + id);
  193. //var x = query.left();
  194. //var y = query.top();
  195. var viewportLocation = query.viewportLocation();
  196. var x = viewportLocation.left;
  197. var y = viewportLocation.top;
  198. var movedWidgets = dragInfo.movedWidgets;
  199. if(!movedWidgets[id]) {
  200. movedWidgets[id] = new Location(x, y);
  201. }
  202. }
  203. };
  204. var Location = function(x, y) {
  205. this.x = x;
  206. this.y = y;
  207. };
  208. $ax.drag.location = Location;
  209. var Rectangle = $ax.drag.Rectangle = function(x, y, width, height) {
  210. this.x = x;
  211. this.y = y;
  212. this.width = width;
  213. this.height = height;
  214. this.right = x + width;
  215. this.bottom = y + height;
  216. };
  217. Rectangle.prototype.IntersectsWith = function(rect) {
  218. if(this.Invalid()) return false;
  219. if(rect.length) {
  220. for(var i = 0; i < rect.length; i++) if(!rect[i].Invalid && this.IntersectsWith(rect[i])) return true;
  221. return false;
  222. }
  223. if(rect.Invalid()) return false;
  224. return this.x < rect.right && this.right > rect.x && this.y < rect.bottom && this.bottom > rect.y;
  225. };
  226. Rectangle.prototype.Invalid = function() {
  227. return this.x == -1 && this.y == -1 && this.width == -1 && this.height == -1;
  228. };
  229. Rectangle.prototype.Move = function(x, y) {
  230. return new Rectangle(x, y, this.width, this.height);
  231. };
  232. });