Draggable.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. // TODO Draggable for group
  2. // FIXME Draggable on element which has parent rotation or scale
  3. function Draggable() {
  4. this.on('mousedown', this._dragStart, this);
  5. this.on('mousemove', this._drag, this);
  6. this.on('mouseup', this._dragEnd, this);
  7. this.on('globalout', this._dragEnd, this); // this._dropTarget = null;
  8. // this._draggingTarget = null;
  9. // this._x = 0;
  10. // this._y = 0;
  11. }
  12. Draggable.prototype = {
  13. constructor: Draggable,
  14. _dragStart: function (e) {
  15. var draggingTarget = e.target;
  16. if (draggingTarget && draggingTarget.draggable) {
  17. this._draggingTarget = draggingTarget;
  18. draggingTarget.dragging = true;
  19. this._x = e.offsetX;
  20. this._y = e.offsetY;
  21. this.dispatchToElement(param(draggingTarget, e), 'dragstart', e.event);
  22. }
  23. },
  24. _drag: function (e) {
  25. var draggingTarget = this._draggingTarget;
  26. if (draggingTarget) {
  27. var x = e.offsetX;
  28. var y = e.offsetY;
  29. var dx = x - this._x;
  30. var dy = y - this._y;
  31. this._x = x;
  32. this._y = y;
  33. draggingTarget.drift(dx, dy, e);
  34. this.dispatchToElement(param(draggingTarget, e), 'drag', e.event);
  35. var dropTarget = this.findHover(x, y, draggingTarget).target;
  36. var lastDropTarget = this._dropTarget;
  37. this._dropTarget = dropTarget;
  38. if (draggingTarget !== dropTarget) {
  39. if (lastDropTarget && dropTarget !== lastDropTarget) {
  40. this.dispatchToElement(param(lastDropTarget, e), 'dragleave', e.event);
  41. }
  42. if (dropTarget && dropTarget !== lastDropTarget) {
  43. this.dispatchToElement(param(dropTarget, e), 'dragenter', e.event);
  44. }
  45. }
  46. }
  47. },
  48. _dragEnd: function (e) {
  49. var draggingTarget = this._draggingTarget;
  50. if (draggingTarget) {
  51. draggingTarget.dragging = false;
  52. }
  53. this.dispatchToElement(param(draggingTarget, e), 'dragend', e.event);
  54. if (this._dropTarget) {
  55. this.dispatchToElement(param(this._dropTarget, e), 'drop', e.event);
  56. }
  57. this._draggingTarget = null;
  58. this._dropTarget = null;
  59. }
  60. };
  61. function param(target, e) {
  62. return {
  63. target: target,
  64. topTarget: e && e.topTarget
  65. };
  66. }
  67. var _default = Draggable;
  68. module.exports = _default;