translate.we

<template>
  <div class="ct"  style="transform:translate({{x}}, {{y}})" onpanstart=starthandler onpanmove=movehandler>
    <text style="font-size: 42;">Move me!</text>
    <image class="img" style="width: 400px; height: 400px;" src="{{img}}"></image>
  </div>
</template>

<style>
  .ct {
    width: 750;
    align-items: center;
    justify-content: center;
  }
  .img {
    margin-bottom: 20px;
  }
</style>

<script>
  module.exports = {
    data: {
      x:0,
      y:0,
      img: '//gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg'
    },
    methods: {
      starthandler: function (e) {
        var touch = e.changedTouches[0];
        this.x0 = touch.screenX  - this.x;
        this.y0 = touch.screenY  - this.y;
      },
      movehandler: function(e) {
        var touch = e.changedTouches[0];
        var x = touch.screenX - this.x0;
        var y = touch.screenY - this.y0;
        this.x = x
        this.y = y
      }
    }
  }
</script>

translateEB.we

<template>
  <div class="ct"  style="transform:translate({{x}}, {{y}})" onpanstart=starthandler onpanmove=movehandler>
    <text style="font-size: 42;">Move me!</text>
    <image class="img" style="width: 400px; height: 400px;" src="{{img}}"></image>
  </div>
</template>

<style>
  .ct {
    width: 750;
    align-items: center;
    justify-content: center;
  }
  .img {
    margin-bottom: 20px;
  }
</style>

<script>
  module.exports = {
    data: {
      x:0,
      y:0,
      img: '//gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg'
    },
    methods: {
      starthandler: function (e) {
        var touch = e.changedTouches[0];
        var x0 = this.x;
        var y0 = this.y;
        createBinding(touch.identifier, '.ct', 'transform', `tranlate(${x0} + x, ${y0} + y)`);
      },
      endhandler: function(e) {
        
      }
    }
  }
</script>