developit/.gitignore

## .gitignore
package-lock.json
node_modules
.cache
dist

## app.module.css
.drag {
	display: grid;
	background: #abc;
	border-radius: 16px;
	height: 80px;
	width: 80px;
	z-index: 10000;

	position: relative;
	cursor: -webkit-grab;
	cursor: grab;
	touch-action: none;
	user-select: none;

	color: #333;
	place-items: center;
}

## app.tsx
import { h, FunctionalComponent } from "preact";
import { useSpring, animated } from "react-spring";
import { useDrag } from "react-use-gesture";
import styles from './app.module.css';

const Slide : FunctionalComponent = () => {
    const [props, set] = useSpring(() => ({ left: 0, top: 0 }));

    const bind = useDrag(({ down, movement: [mx, my] }) => {
        set({ left: down ? mx : 0, top: down ? my : 0 });
    });

    return <animated.div {...bind()} style={props} class={styles.drag} />;
};

export default Slide;

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>useSpring</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <script type="module" src="/index.js"></script>
</body>
</html>

## index.js
import { render } from 'preact';
import App from './app.tsx';
render(<App />, document.body);

## package.json
{
  "version": "0.0.1",
  "scripts": {
    "start": "wmr",
    "build:prod": "wmr build"
  },
  "engines": {
    "node": "12.x"
  },
  "alias": {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  },
  "devDependencies": {
    "wmr": "^0.0.11"
  }
}

## style.css
html,
body {
	font: 100% system-ui;
}
	.drag {
	display: grid;
	background: #abc;
	border-radius: 16px;
	height: 80px;
	width: 80px;
	z-index: 10000;

	position: relative;
	cursor: -webkit-grab;
	cursor: grab;
	touch-action: none;
	user-select: none;

	color: #333;
	place-items: center;
	}
	import { h, FunctionalComponent } from "preact";
	import { useSpring, animated } from "react-spring";
	import { useDrag } from "react-use-gesture";
	import styles from './app.module.css';

	const Slide : FunctionalComponent = () => {
	const [props, set] = useSpring(() => ({ left: 0, top: 0 }));

	const bind = useDrag(({ down, movement: [mx, my] }) => {
	set({ left: down ? mx : 0, top: down ? my : 0 });
	});

	return <animated.div {...bind()} style={props} class={styles.drag} />;
	};

	export default Slide;
	<!DOCTYPE html>
	<html>
	<head>
	<title>useSpring</title>
	<link rel="stylesheet" href="/style.css">
	</head>
	<body>
	<script type="module" src="/index.js"></script>
	</body>
	</html>
	import { render } from 'preact';
	import App from './app.tsx';
	render(<App />, document.body);
	{
	"version": "0.0.1",
	"scripts": {
	"start": "wmr",
	"build:prod": "wmr build"
	},
	"engines": {
	"node": "12.x"
	},
	"alias": {
	"react": "preact/compat",
	"react-dom": "preact/compat"
	},
	"devDependencies": {
	"wmr": "^0.0.11"
	}
	}