1 /** 2 * Hilo 3 * Copyright 2015 alibaba.com 4 * Licensed under the MIT License 5 */ 6 7 /** 8 * @language=en 9 * <iframe src='../../../examples/drag.html?noHeader' width = '550' height = '250' scrolling='no'></iframe> 10 * <br/> 11 * example: 12 * <pre> 13 * var bmp = new Bitmap({image:img}); 14 * Hilo.copy(bmp, Hilo.drag); 15 * bmp.startDrag([0, 0, 550, 400]); 16 * </pre> 17 * @class drag A mixin that contains drag method.You can mix drag method to the visual target by use Class.mix(target, drag) or Hilo.copy(target, drag). 18 * @mixin 19 * @static 20 * @module hilo/util/drag 21 * @requires hilo/core/Class 22 * @requires hilo/core/Hilo 23 */ 24 var drag = { 25 /** 26 * @language=en 27 * start drag. 28 * @param {Array} bounds The bounds area that the view can move, relative to the coordinates of the view's parent, [x, y, width, height], default is no limit. 29 */ 30 startDrag:function(bounds){ 31 var that = this; 32 var stage; 33 var bounds = bounds||[-Infinity, -Infinity, Infinity, Infinity]; 34 var mouse = { 35 x:0, 36 y:0, 37 preX:0, 38 preY:0 39 }; 40 var minX = bounds[0]; 41 var minY = bounds[1]; 42 var maxX = bounds[2] == Infinity?Infinity:minX + bounds[2]; 43 var maxY = bounds[3] == Infinity?Infinity:minY + bounds[3]; 44 45 function onStart(e){ 46 e.stopPropagation(); 47 updateMouse(e); 48 that.off(Hilo.event.POINTER_START, onStart); 49 50 that.fire("dragStart", mouse); 51 52 that.__dragX = that.x - mouse.x; 53 that.__dragY = that.y - mouse.y; 54 55 if(!stage){ 56 stage = this.getStage(); 57 } 58 stage.on(Hilo.event.POINTER_MOVE, onMove); 59 document.addEventListener(Hilo.event.POINTER_END, onStop); 60 } 61 62 function onStop(e){ 63 document.removeEventListener(Hilo.event.POINTER_END, onStop); 64 stage && stage.off(Hilo.event.POINTER_MOVE, onMove); 65 66 that.fire("dragEnd", mouse); 67 that.on(Hilo.event.POINTER_START, onStart); 68 } 69 70 function onMove(e){ 71 updateMouse(e); 72 73 that.fire("dragMove", mouse); 74 75 var x = mouse.x + that.__dragX; 76 var y = mouse.y + that.__dragY; 77 78 that.x = Math.max(minX, Math.min(maxX, x)); 79 that.y = Math.max(minY, Math.min(maxY, y)); 80 } 81 82 function updateMouse(e){ 83 mouse.preX = mouse.x; 84 mouse.preY = mouse.y; 85 mouse.x = e.stageX; 86 mouse.y = e.stageY; 87 } 88 89 function stopDrag(){ 90 document.removeEventListener(Hilo.event.POINTER_END, onStop); 91 stage && stage.off(Hilo.event.POINTER_MOVE, onMove); 92 that.off(Hilo.event.POINTER_START, onStart); 93 } 94 that.on(Hilo.event.POINTER_START, onStart); 95 96 that.stopDrag = stopDrag; 97 }, 98 /** 99 * @language=en 100 * stop drag. 101 */ 102 stopDrag:function(){ 103 104 } 105 };