# 拖动

显示对象拖拽实例,点击显示元素开始拖拽,释放鼠标(或者抬起触摸手指)结束拖拽操作。


var Main = VueEgret.classMain({
  data: function () {
    return {
      touchStatus: false, // 当前触摸状态,按下时,值为true
      distance: new egret.Point(), // 鼠标点击时,鼠标全局坐标与_bird的位置差
      birdX: 0,
      birdY: 0,
      texture: null,
    };
  },
  mounted: function () {
    var imgLoader = new egret.ImageLoader();
    imgLoader.once(egret.Event.COMPLETE, function (evt) {
      /// 将图像显示出来
      var texture = new egret.Texture();
      texture.bitmapData = evt.currentTarget.data;
      this.texture = texture;
    }, this);
    imgLoader.load('../resource/cartoon-egret_00.png');

    this.birdX = this.$stageWidth / 2;
    this.birdY = this.$stageHeight / 2;
  },
  methods: {
    onTouchBegin: function (evt) {
      this.touchStatus = true;
      this.distance.x = evt.stageX - this.birdX;
      this.distance.y = evt.stageY - this.birdY;
      this.$stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.onTouchMove, this);
    },
    onTouchMove: function (evt) {
      if (this.touchStatus) {
        this.birdX = evt.stageX - this.distance.x;
        this.birdY = evt.stageY - this.distance.y;
      }
    },
    onTouchEnd: function () {
      this.touchStatus = false;
      this.$stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.onTouchMove, this);
    },
  },
  template: `<DisplayObjectContainer>
    <Bitmap :x="birdX" :y="birdY" :texture="texture" :anchorOffsetX="114" :anchorOffsetY="190" touchEnabled @touchBegin="onTouchBegin" @touchEnd="onTouchEnd"></Bitmap>
    <TextField x="50" y="50" size="28" textAlign="left" textColor="0x000000" type="dynamic" lineSpacing="6" multiline>按住显示对象即可拖拽,释放鼠标停止拖拽</TextField>
  </DisplayObjectContainer>`,
})