Click here to Skip to main content
13,356,318 members (64,906 online)
Click here to Skip to main content
Add your own
alternative version


5 bookmarked
Posted 21 Apr 2012

Drag, Drop, and Rotate for Safari in iPad

, 25 Apr 2013
Rate this:
Please Sign up or sign in to vote.
Example of how to use JavaScript to drag, drop, and rotate elements for Safari in iPad.


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.

Using the Code

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

var startScale = 0;
var startRotation = 0;

function OnLoad(){
    if (navigator.platform=="iPad"){

function MakeiPadDragable(id){
    var oBox = $(id);
    oBox.ontouchstart= function(e){TouchStart(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){ = "GestureStart";
    startScale = e.scale;
    startRotation = e.rotation;

function GestureChange(e){ = "GestureChange, rotation: " + e.rotation + ", scale: " + e.scale;

    e.preventDefault(); = 'scale(' + e.scale  + startScale  + ') 
    rotate(' + e.rotation + startRotation + 'deg)'; 

function GestureEnd(e){ = "GestureEnd";

function TouchStart(e){ = "TouchStart: "
    var o =;
    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){
    // = "TouchMove: ";
    var o = e.targetTouches[0].target;
    var curX = e.targetTouches[0].pageX - parseInt(o.getAttribute("offsetX"));
    var curY = e.targetTouches[0].pageY - parseInt(o.getAttribute("offsetY"));;  = "absolute";  = curY + 'px'; = curX + 'px'; 

function TouchEnd(e){ = "TouchEnd: "

function TouchCancel(e){ = "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.


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


About the Author

Igor Krupitsky
Web Developer
United States United States
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.

You may also be interested in...


Comments and Discussions

QuestionNothing Pin
Member 1115140713-Oct-14 22:16
memberMember 1115140713-Oct-14 22:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180111.1 | Last Updated 25 Apr 2013
Article Copyright 2012 by Igor Krupitsky
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid