<script>
var selectedElement;

function findDraggableElement (target) {
  if (document.layers) {
    if (target.constructor == Document) {
      for (var l = 0; l < document.layers.length; l++)
        if (target == document.layers[l].document) 
          return document.layers[l];
    }
    else if (target.constructor == Image) {
      for (var l = 0; l < document.layers.length; l++)
        for (var i = 0; i < document.layers[l].document.images.length; i++)
          if (target == document.layers[l].document.images[i])
            return document.layers[l];
    }
    return null;
  }
  else if (document.all) {
    do 
      if (target.className == 'draggableElement')
        return target;
    while ((target = target.parentElement));
    return null;
  }
  else if (document.getElementById) {
    do
      if (target.className == 'draggableElement')
        return target;
    while ((target = target.parentNode));
    return null;
  }
}

function checkSelection (evt) {
   if (document.layers) {
     selectedElement = findDraggableElement (evt.target);
     if (selectedElement) {
       document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
       document.onmousemove = drag;
       document.onmouseup = stopDrag;
     }
   }
   else if (document.all) {
     selectedElement = findDraggableElement (event.srcElement);
     if (selectedElement) {
       document.onmousemove = drag;
       document.onmouseup = stopDrag;
     }
   }
   else if (document.getElementById) {
     selectedElement = findDraggableElement (evt.target);
     if (selectedElement) {
       document.onmousemove = drag;
       document.onmouseup = stopDrag;
     }
   }
}

function drag (evt) {
  if (document.layers) {
    selectedElement.left = evt.pageX;
    selectedElement.top = evt.pageY;
  }
  else if (document.all) {
    selectedElement.style.posLeft = event.clientX;
    selectedElement.style.posTop = event.clientY;
  }
  else if (document.getElementById) {
    selectedElement.style.left = evt.clientX + 'px';
    selectedElement.style.top = evt.clientY + 'px';
  }
}

function stopDrag (evt) {
    if (!evt) evt = event;
	document.forms["imageForm"].elements["layerid"+selectedElement.id].value = selectedElement.id;
    document.forms["imageForm"].elements["coordsx"+selectedElement.id].value = evt.clientX;
	document.forms["imageForm"].elements["coordsy"+selectedElement.id].value = evt.clientY;

    if (document.layers) {
        document.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
        document.onmousemove = null;
        document.onmouseup = null;
        selectedElement = null;
    } else if (document.all || document.getElementById) {
        document.onmousemove = null;
        document.onmouseup = null;
        selectedElement = null;
    }
}

if (document.layers)
  document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = checkSelection;

if (document.all)
  document.onselectstart = document.ondragstart = function () {
    return false;
  };
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>

<div class="editor">

<form action="output.php" method="post" name="imageForm">
	<input type="hidden" name="layeridd1">
    <input type="hidden" name="coordsxd1" />
	<input type="hidden" name="coordsyd1" />
	<input type="hidden" name="layeridd2">
    <input type="hidden" name="coordsxd2" />
	<input type="hidden" name="coordsyd2" />
	<input type="hidden" name="layeridd3">
    <input type="hidden" name="coordsxd3" />
	<input type="hidden" name="coordsyd3" />
    <div style="position:absolute;z-index:1;margin-left:760px;"><input type="submit" value="Sende Bild" /></div>
</form>

 <style>
#makeMeDraggable { width: 300px; height: 300px; background: white;border:1px black solid; }
</style>


<script type="text/javascript">

$( init );

function init() {
  $('#makeMeDraggable').draggable( {
    cursor: 'move',
    containment: 'document',
    stop: handleDragStop
  } );
}

function handleDragStop( event, ui ) {
  var offsetXPos = parseInt( ui.offset.left );
  var offsetYPos = parseInt( ui.offset.top );
  alert( "Drag stopped!\n\nOffset: (" + offsetXPos + ", " + offsetYPos + ")\n");
}


</script>

</head>
<body>



<div id="content">
  <div id="makeMeDraggable"> </div>

</div>

<script type="text/javascript">

$( init );

function init() {
  $('#makeMeDraggable').draggable( {
    cursor: 'move',
    containment: 'document',
    stop: handleDragStop
  } );
}

function handleDragStop( event, ui ) {
  var offsetXPos = parseInt( ui.offset.left );
  var offsetYPos = parseInt( ui.offset.top );
  alert( " " + offsetXPos + "," + offsetYPos + "\n");


}
</script>



</head>
<body>
<div id="content">
  <div id="makeMeDraggable">

<script type="text/javascript"> 
<!--
      
     
      var link = '<a href="/auswertung.php?offsetXPos='
                 + offsetXPos + '&offsetYPos='
                 + offsetYPos + '">Eintragen...</a>'
      document.write(link);
-->  
</script>