|
|
<head>
<script type="text/javascript">
var startScale = 0;
var startRotation = 0;
function OnLoad(){
if (navigator.platform=="iPad"){
MakeiPadDragable("idBox1");
MakeiPadDragable("idBox2");
MakeiPadDragable("idBox3");
MakeiPadDragable("idBox4");
MakeiPadDragable("idBox5");
}
}
function MakeiPadDragable(id){
var oBox = $(id);
oBox.ontouchstart= function(e){TouchStart(e)};
oBox.ontouchmove=function(e){TouchMove(e)};
oBox.ontouchend=function(e){TouchEnd(e)};
oBox.ontouchcancel=function(e){TouchCancel(e)};
oBox.ongesturestart=function(e){GestureStart(e)};
oBox.ongesturechange=function(e){GestureChange(e)};
oBox.ongestureend=function(e){GestureEnd(e)};
oBox.className = "Dragable";
}
function GetObjPos(obj){
var x = 0;
var y = 0;
var w = obj.offsetWidth;
var h = obj.offsetHeight;
if (obj.offsetParent) {
x = obj.offsetLeft
y = obj.offsetTop
while (obj = obj.offsetParent){
x += obj.offsetLeft;
y += obj.offsetTop;
}
}
return {x:x, y:y, w:w, h:h};
}
function GestureStart(e){
e.target.innerHTML = "GestureStart";
startScale = e.scale;
startRotation = e.rotation;
}
function GestureChange(e){
e.target.innerHTML = "GestureChange, rotation: " + e.rotation + ", scale: " + e.scale;
e.preventDefault();
e.target.style.webkitTransform = 'scale(' + e.scale + startScale + ') rotate(' + e.rotation + startRotation + 'deg)';
}
function GestureEnd(e){
e.target.innerHTML = "GestureEnd";
}
function TouchStart(e){
e.target.innerHTML = "TouchStart: "
var o = e.target;
var oPos = GetObjPos(o);
o.setAttribute("offsetX", e.targetTouches[0].pageX - oPos.x);
o.setAttribute("offsetY", e.targetTouches[0].pageY - oPos.y);
}
function TouchMove(e){
//e.target.innerHTML = "TouchMove: ";
var o = e.targetTouches[0].target;
e.preventDefault();
var curX = e.targetTouches[0].pageX - parseInt(o.getAttribute("offsetX"));
var curY = e.targetTouches[0].pageY - parseInt(o.getAttribute("offsetY"));;
o.style.position = "absolute";
o.style.top = curY + 'px';
o.style.left = curX + 'px';
}
function TouchEnd(e){
e.target.innerHTML = "TouchEnd: "
}
function TouchCancel(e){
e.target.innerHTML = "TouchCancel: "
//alert("TouchCancel!!!");
}
function UpdateOrientation(){
var s = "";
switch(window.orientation) {
case 0: s = "Portrait"; break;
case -90: s = "Landscape (right, screen turned clockwise)"; break;
case 90: s = "Landscape (left, screen turned counterclockwise)"; break;
case 180: s = "Portrait (upside-down portrait)"; break;
}
$("idBox1").innerHTML = s;
}
function $(s){
return document.getElementById(s);
}
</script>
<style>
.Dragable{
cursor:move;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
</head>
<body onload="OnLoad()" onorientationchange="UpdateOrientation()">
<div id="idBox1" style="width: 200px; height:50px; background-color: Yellow; text-align: center;">iPad 1</div>
<div id="idBox2" style="width: 200px; height:50px; background-color: Green; text-align: center;">iPad 2</div>
<div id="idBox3" style="width: 200px; height:50px; background-color: LightBlue; text-align: center;">iPad 3</div>
<div id="idBox4" style="width: 200px; height:50px; background-color: Pink; text-align: center;">iPad 4</div>
<div id="idBox5" style="width: 200px; height:50px; background-color: Orange; text-align: center;">iPad 5</div>
</body>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Igor is a business intelligence consultant working in Tampa, Florida. He has a BS in Finance from University of South Carolina and Masters in Information Management System from University of South Florida. He also has following professional certifications: MCSD, MCDBA, MCAD.
Submit an article or tip