Skip to content

Instantly share code, notes, and snippets.

@wintercn
Last active November 30, 2016 04:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wintercn/e88b4e468d0d0e1571d26198c1e6c22f to your computer and use it in GitHub Desktop.
Save wintercn/e88b4e468d0d0e1571d26198c1e6c22f to your computer and use it in GitHub Desktop.
<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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment