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 };