Onclick move divs?

[pxlcreations]

Hello all. I have a pretty important question. I am building a webapp for the iPad and I need to be able to drag divs around the page for it to work. I had this script which works in desktop browsers:

function Browser() {

  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

var browser = new Browser();

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 0;

function dragStart(event, id) {

  var el;
  var x, y;

  // If an element id was given, find it. Otherwise use the element being
  // clicked on.

  if (id)
    dragObj.elNode = document.getElementById(id);
  else {
    if (browser.isIE)
      dragObj.elNode = window.event.srcElement;
    if (browser.isNS)
      dragObj.elNode = event.target;

    // If this is a text node, use its parent element.

    if (dragObj.elNode.nodeType == 3)
      dragObj.elNode = dragObj.elNode.parentNode;
  }

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Save starting positions of cursor and element.

  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

  // Update element's z-index.

  dragObj.elNode.style.zIndex = ++dragObj.zIndex;

  // Capture mousemove and mouseup events on the page.

  if (browser.isIE) {
    document.attachEvent("onmousemove", dragGo);
    document.attachEvent("onmouseup",   dragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", dragGo,   true);
    document.addEventListener("mouseup",   dragStop, true);
    event.preventDefault();
  }
}

function dragGo(event) {

  var x, y;

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Move drag element by the same amount the cursor has moved.

  dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";

  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS)
    event.preventDefault();
}

function dragStop(event) {

  // Stop capturing mousemove and mouseup events.

  if (browser.isIE) {
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup",   dragStop);
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", dragGo,   true);
    document.removeEventListener("mouseup",   dragStop, true);
  }
}

And then I put this into the body section of the page:

<div id="boxA" class="box" style="left:400px;top:150px;">
<div class="bar" style="width:12em;"
onmousedown="dragStart(event, 'boxA')">Drag Box B</div>
<div class="content" style="width:12em;">

Enter stuff to be dragged here.

</div>
</div>

The iPad doesn't read "onmousedown" correctly though, so I need another attribute to be put there instead. I tried "onclick" and then viewed it on the iPad and I was able to click on the div, then click around the page and the div would move there. If I use "onclick" though, something has to tell the browser that once I've clicked it once it stops moving if I click somewhere on the page.

Like I said, if you can help, great!

[vwphillips]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/

function zxcEventAdd(o,f,e,p) {
 if ( o.addEventListener ){ o.addEventListener(e,function(ev){ return o[f](ev,p);}, false); }
 else if ( o.attachEvent ){ o.attachEvent('on'+e,function(ev){ return o[f](ev,p); }); }
 else {
  var prev=o['on'+e];
  if (prev){ o['on'+e]=function(ev){ prev(ev); o[f](ev,p); }; }
  else { o['on'+e]=o[f]; }
 }
}

function zxcAddEvt(obj,fun,ev,p){
 if (obj['zxc'+fun+ev]) return;
 obj['zxc'+fun+ev]=window[fun];
 zxcEventAdd(obj,'zxc'+fun+ev,ev,p);
}

zxcAddEvt(document,'zxcDrag','click');

function zxcDrag(e){
 var obj=e.srcElement||e.target;
 var mse=zxcMse(e);
 while (obj.parentNode){
  if (obj.className&&obj.className.indexOf('drag')>-1){
   this.dobj=[obj,mse[0]-parseInt(obj.style.left),mse[1]-parseInt(obj.style.top)];
   return
  }
  obj=obj.parentNode;
 }
 if (this.dobj){
  this.dobj[0].style.left=mse[0]-this.dobj[1]+'px';
  this.dobj[0].style.top=mse[1]-this.dobj[2]+'px';
  this.dobj=false
 }
}

function zxcMse(ev){
 if(!ev) var ev=window.event;
 if (document.all) return [ev.clientX+zxcDocS()[0],ev.clientY+zxcDocS()[1]];
 return [ev.pageX,ev.pageY];
}

function zxcDocS(){
 if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.scrollLeft,document.body.scrollTop];
}
/*]]>*/
</script></head>

<body>
<div id="boxA" class="box drag" style="position:absolute;left:400px;top:150px;">
<div class="bar" style="width:12em;" >Drag Box B</div>
<div class="content" style="width:12em;">

Enter stuff to be dragged here.

</div>
</div>
<div class="drag" style="position:absolute;left:40px;top:150px;">
<div class="bar" style="width:12em;" >Drag Box A</div>
<div class="content" style="width:12em;">

Enter stuff to be dragged here.

</div>
</div>
</body>

</html>

[pxlcreations]

Thanks for the script, except it doesn't work. I will click on a div and then somewhere else on the page and it will just stay there. With the previous script I used... this worked:

<div id="boxA" class="box" style="left:400px;top:150px;">
<div class="bar" style="width:12em;"
onclick="dragStart(event, 'boxA')">Drag Box B</div>
<div class="content" style="width:12em;">

Enter stuff to be dragged here.

</div>
</div>

But then it would keep following my finger after clicking around the page... could you modify the script in my first post to make the div stop moving after tapping on it once so that it can't move until you tap on it again? That I think would work since onclick works.

[vwphillips]

works with IE and FF on a PC

click to select and click outside div to reposition

I have not got an IPOD to test on

BTW could not get your script to work using click

[pxlcreations]

Yeah, I tried that on the ipad and it doesn't work... so there couldn't be a script that uses onclick... that like, I click in the box and it moves to where I click next?

[pxlcreations]

Wait a minute, I found something that will work!! http://www.manifestinteractive.com/iphone/touch/