mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1010 B
51 lines
1010 B
6 years ago
|
<script>
|
||
|
import { spring } from 'svelte/motion';
|
||
|
import { pannable } from './pannable.js';
|
||
|
|
||
|
const coords = spring({ x: 0, y: 0 }, {
|
||
|
stiffness: 0.2,
|
||
|
damping: 0.4
|
||
|
});
|
||
|
|
||
|
function handlePanStart() {
|
||
|
coords.stiffness = coords.damping = 1;
|
||
|
}
|
||
|
|
||
|
function handlePanMove(event) {
|
||
|
coords.update($coords => ({
|
||
|
x: $coords.x + event.detail.dx,
|
||
|
y: $coords.y + event.detail.dy
|
||
|
}));
|
||
|
}
|
||
|
|
||
|
function handlePanEnd(event) {
|
||
|
coords.stiffness = 0.2;
|
||
|
coords.damping = 0.4;
|
||
|
coords.set({ x: 0, y: 0 });
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
.box {
|
||
|
--width: 100px;
|
||
|
--height: 100px;
|
||
|
position: absolute;
|
||
|
width: var(--width);
|
||
|
height: var(--height);
|
||
|
left: calc(50% - var(--width) / 2);
|
||
|
top: calc(50% - var(--height) / 2);
|
||
|
border-radius: 4px;
|
||
|
background-color: #ff3e00;
|
||
|
cursor: move;
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<div class="box"
|
||
|
use:pannable
|
||
|
on:panstart={handlePanStart}
|
||
|
on:panmove={handlePanMove}
|
||
|
on:panend={handlePanEnd}
|
||
6 years ago
|
style="transform:
|
||
|
translate({$coords.x}px,{$coords.y}px)
|
||
|
rotate({$coords.x * 0.2}deg)"
|
||
6 years ago
|
></div>
|