draggable.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. define( function ( require, exports, module ) {
  2. var Paper = require( 'graphic/paper' );
  3. var touchable = window.ontouchstart !== undefined;
  4. var DRAG_START_EVENT = touchable ? 'touchstart' : 'mousedown',
  5. DRAG_MOVE_EVENT = touchable ? 'touchmove' : 'mousemove',
  6. DRAG_END_EVENT = touchable ? 'touchend' : 'mouseup';
  7. return require( 'core/class' ).createClass( {
  8. drag: function ( opt ) {
  9. if ( this.dragEnabled ) {
  10. return;
  11. }
  12. var dragStart = opt && opt.start || this.dragStart,
  13. dragMove = opt && opt.move || this.dragMove,
  14. dragEnd = opt && opt.end || this.dragEnd,
  15. dragTarget = opt && opt.target || this.dragTarget || this,
  16. me = this;
  17. this.dragEnabled = true;
  18. this.dragTarget = dragTarget;
  19. function bindEvents( paper ) {
  20. var startPosition, lastPosition, dragging = false;
  21. var dragFn = function ( e ) {
  22. if ( !dragging ) {
  23. paper.off( DRAG_MOVE_EVENT, dragFn );
  24. }
  25. var currentPosition = e.getPosition();
  26. var movement = {
  27. x: currentPosition.x - startPosition.x,
  28. y: currentPosition.y - startPosition.y
  29. };
  30. var delta = {
  31. x: currentPosition.x - lastPosition.x,
  32. y: currentPosition.y - lastPosition.y
  33. };
  34. var dragInfo = {
  35. position: currentPosition,
  36. movement: movement,
  37. delta: delta
  38. };
  39. lastPosition = currentPosition;
  40. if ( dragMove ) {
  41. dragMove.call( me, dragInfo );
  42. } else if ( me instanceof Paper ) {
  43. // treate paper drag different
  44. var view = me.getViewPort();
  45. view.center.x -= movement.x;
  46. view.center.y -= movement.y;
  47. me.setViewPort( view );
  48. } else {
  49. me.translate( delta.x, delta.y );
  50. }
  51. dragTarget.trigger( 'dragmove', dragInfo );
  52. e.stopPropagation();
  53. e.preventDefault();
  54. };
  55. dragTarget.on( DRAG_START_EVENT, dragTarget._dragStartHandler = function ( e ) {
  56. if ( e.originEvent.button ) {
  57. return;
  58. }
  59. dragging = true;
  60. var dragInfo = {
  61. position: lastPosition = startPosition = e.getPosition()
  62. };
  63. if ( dragStart ) {
  64. var cancel = dragStart.call( me, dragInfo ) === false;
  65. if ( cancel ) {
  66. return;
  67. }
  68. }
  69. paper.on( DRAG_MOVE_EVENT, dragFn );
  70. dragTarget.trigger( 'dragstart', dragInfo );
  71. e.stopPropagation();
  72. e.preventDefault();
  73. } );
  74. paper.on( DRAG_END_EVENT, dragTarget._dragEndHandler = function ( e ) {
  75. if ( dragging ) {
  76. dragging = false;
  77. var dragInfo = {
  78. position: e.getPosition()
  79. };
  80. if ( dragEnd ) {
  81. dragEnd.call( me, dragInfo );
  82. }
  83. paper.off( DRAG_MOVE_EVENT, dragFn );
  84. dragTarget.trigger( 'dragend', dragInfo );
  85. e.stopPropagation();
  86. e.preventDefault();
  87. }
  88. } );
  89. }
  90. if ( me instanceof Paper ) {
  91. bindEvents( me );
  92. } else if ( me.getPaper() ) {
  93. bindEvents( me.getPaper() );
  94. } else {
  95. var listener = function ( e ) {
  96. if ( e.target.getPaper() ) {
  97. bindEvents( e.target.getPaper() );
  98. me.off( 'add', listener );
  99. me.off( 'treeadd', listener );
  100. }
  101. }
  102. me.on( 'add treeadd', listener );
  103. }
  104. return this;
  105. }, // end of drag
  106. undrag: function () {
  107. var target = this.dragTarget;
  108. target.off( DRAG_START_EVENT, target._dragStartHandler );
  109. target.getPaper().off( DRAG_END_EVENT, target._dragEndHandler );
  110. delete target._dragStartHandler;
  111. delete target._dragEndHandler;
  112. this.dragEnabled = false;
  113. return this;
  114. }
  115. } );
  116. } );