1 /**
  2  * Hilo
  3  * Copyright 2015 alibaba.com
  4  * Licensed under the MIT License
  5  */
  6 
  7 /**
  8  * <iframe src='../../../examples/drag.html?noHeader' width = '550' height = '250' scrolling='no'></iframe>
  9  * <br/>
 10  * 使用示例:
 11  * <pre>
 12  * var bmp = new Bitmap({image:img});
 13  * Hilo.copy(bmp, Hilo.drag);
 14  * bmp.startDrag([0, 0, 550, 400]);
 15  * </pre>
 16  * @class drag是一个包含拖拽功能的mixin。可以通过 Class.mix(view, drag)或Hilo.copy(view, drag)来为view增加拖拽功能。
 17  * @mixin
 18  * @static
 19  * @module hilo/util/drag
 20  * @requires hilo/core/Class
 21  * @requires hilo/core/Hilo
 22  */
 23 var drag = {
 24     /**
 25       * 开始拖拽
 26       * @param {Array} bounds 拖拽范围,基于父容器坐标系,[x, y, width, height], 默认无限制
 27     */
 28     startDrag:function(bounds){
 29         var that = this;
 30         var stage;
 31         var bounds = bounds||[-Infinity, -Infinity, Infinity, Infinity];
 32         var mouse = {
 33             x:0,
 34             y:0,
 35             preX:0,
 36             preY:0
 37         };
 38         var minX = bounds[0];
 39         var minY = bounds[1];
 40         var maxX = bounds[2] == Infinity?Infinity:minX + bounds[2];
 41         var maxY = bounds[3] == Infinity?Infinity:minY + bounds[3];
 42 
 43         function onStart(e){
 44             e.stopPropagation();
 45             updateMouse(e);
 46             that.off(Hilo.event.POINTER_START, onStart);
 47 
 48             that.fire("dragStart", mouse);
 49 
 50             that.__dragX = that.x - mouse.x;
 51             that.__dragY = that.y - mouse.y;
 52 
 53             if(!stage){
 54                 stage = this.getStage();
 55             }
 56             stage.on(Hilo.event.POINTER_MOVE, onMove);
 57             document.addEventListener(Hilo.event.POINTER_END, onStop);
 58         }
 59 
 60         function onStop(e){
 61             document.removeEventListener(Hilo.event.POINTER_END, onStop);
 62             stage && stage.off(Hilo.event.POINTER_MOVE, onMove);
 63 
 64             that.fire("dragEnd", mouse);
 65             that.on(Hilo.event.POINTER_START, onStart);
 66         }
 67 
 68         function onMove(e){
 69             updateMouse(e);
 70 
 71             that.fire("dragMove", mouse);
 72 
 73             var x = mouse.x + that.__dragX;
 74             var y = mouse.y + that.__dragY;
 75 
 76             that.x = Math.max(minX, Math.min(maxX, x));
 77             that.y = Math.max(minY, Math.min(maxY, y));
 78         }
 79 
 80         function updateMouse(e){
 81             mouse.preX = mouse.x;
 82             mouse.preY = mouse.y;
 83             mouse.x = e.stageX;
 84             mouse.y = e.stageY;
 85         }
 86 
 87         function stopDrag(){
 88             document.removeEventListener(Hilo.event.POINTER_END, onStop);
 89             stage && stage.off(Hilo.event.POINTER_MOVE, onMove);
 90             that.off(Hilo.event.POINTER_START, onStart);
 91         }
 92         that.on(Hilo.event.POINTER_START, onStart);
 93 
 94         that.stopDrag = stopDrag;
 95     },
 96     /**
 97       * 停止拖拽
 98     */
 99     stopDrag:function(){
100 
101     }
102 };