Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Drag, Drop, and Rotate for Safari in iPad

5.00/5 (2 votes)
25 Apr 2013CPOL 23.2K   209  
Example of how to use JavaScript to drag, drop, and rotate elements for Safari in iPad.

Introduction

This tip provides a JavaScript example of how to drag, drop, and rotate elements in iPad/Safari. Touch events (ontouchstart and ontouchmove) are used to move elements. Gesture events (ongesturestart and ongesturechange) are used to rotate elements. To detect that iPad has been rotated, the onorientationchange event is used.

Image 1

Using the Code

To use this script, use the MakeiPadDragable JavaScript function to make some DIVs dragable. Here is the full JavaScript code:

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);
}

I hope someone might find this example useful.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)