alloytouch
Version:
super tiny size touch and physical motion library for the web
58 lines (51 loc) • 1.62 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>AlloyTouch</title>
<style>
.box {
background-color: #00ABEB;
border: 1px solid #c3c8cc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
height: 150px;
font-size: 34px;
color: white;
text-align: center;
line-height: 26px;
width: 150px;
position:absolute;
top:50%;
left:50%;
line-height:150px;
margin-left:-75px;
margin-top:-75px;
}
.button.active {
background-color: #006389;
}
</style>
</head>
<body>
<a href="https://github.com/AlloyTeam/AlloyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;width:140px;height:140px;">
<img src="//alloyteam.github.io/github.png" alt="">
</a>
<div class="box" id="box"> Drag Me</div>
<script src="../index.js"></script>
<script src="../transformjs/transform.js"></script>
<script>
var box = document.getElementById("box");
Transform(box);
new AlloyTouch({
touch: box,
pressMove: function (evt) {
box.translateX += evt.deltaX;
box.translateY += evt.deltaY;
}
})
</script>
</body>
</html>