<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#a1 {
background: #222;
cursor: move;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="a1"></div>
Left: <span id="pos">0</span>
<script type="text/javascript">
(function() {
var a1 = document.getElementById('a1'),
tmp = 0;
a1.onmousedown = function() {
this.onmousemove = function(e) {
if(tmp > e.pageX) LeftRotate();
tmp = e.pageX;
}
window.onmouseup = function() {
a1.onmousemove = null;
this.onmouseup = null;
}
}
})();
var leftRotate = 0,
elem = document.getElementById('pos');
function LeftRotate() {
leftRotate++;
elem.innerHTML = leftRotate;
}
</script>
</body>
</html>
