<template>
  <view class="area">
    <view @click="test.setColor" class="setColor">点击变成红色: {{test.msg}}</view>
    <view @touchstart="test.touchstart" @touchmove="test.touchmove" class="movable">{{test.msg}}</view>
  </view>
</template>
<script module="test" lang="wxs">
  var startX = 0
  var startY = 0
  var lastLeft = 50;
  var lastTop = 50

  function touchstart(event, ins) {
    console.log("touchstart")
    var touch = event.touches[0] || event.changedTouches[0]
    startX = touch.pageX
    startY = touch.pageY
  }

  function touchmove(event, ins) {
    console.log("touchmove")
    var touch = event.touches[0] || event.changedTouches[0]
    var pageX = touch.pageX
    var pageY = touch.pageY
    var left = pageX - startX + lastLeft
    var top = pageY - startY + lastTop
    startX = pageX
    startY = pageY
    lastLeft = left
    lastTop = top
    ins.selectComponent('.movable').setStyle({
      left: left + 'px',
      top: top + 'px'
    })
    return false
  }

  module.exports = {
    msg: 'Hello',
    touchstart: touchstart,
    touchmove: touchmove,
    setColor: function(event,ins) {
      ins.setStyle({
        color: "red"
      })
    }
  }
</script>
<script>
  export default {
    data() {
      return {}
    },
    methods: {}
  }
</script>
<style>
  .area {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .movable {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px;
    color: #fff000;
    text-align: center;
    line-height: 100px;
    background-color: #ff5500;
  }
</style>