Drag 'n' Drop mit JS

Ok, die Position der EventHandler ist tatsächlich egal. Das verwundert mich allerdings stark... Warum ist das so? Die sind ja schließlich zu dem Zeitpunkt der zuweisung noch nicht definiert?

Code:
document.onmousemove = x;
var x = function() { ... };

funktioniert erwartungsgemäß nicht.
Das mit den einheiten jedoch ist ebenfalls irrelevant.

Allerdings seh ich auch kein Problem mit dem Code, ich hab ihn gerad mal eben selbst getestet und es funktioniert bei mir im Firefox3 ohne Probleme. Nen andren Browser zum testen habe ich allerdings nicht hier...
 
Die Klammer ist denk ich nur Copy&Paste Fehler, und die Knotenstruktur dürfte nicht so viel ausmachen, wegen der Schleife in getPosition
 
Es wird wohl nichts bringen, wenn du nur sagst, dass es nicht geht, wenn es bei allen anderen geht...du wirst mit dem kompletten Sourcecode des Dokumentes zeigen müssen.
 
Hier der komplette Code:
(ich habe ihn etwas an der Liste gekürzt)
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">

<head>
   <meta http-equiv="content-language" content="de">
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
   <meta name="author" content="TS">

   <title>Layer wandert</title>


   <style type="text/css">
.grass
{

width:75%;
Height:95%;
background-image:url('8stesec0.jpg');
overflow: hidden;

position: absolute;
Left:1px:Top:1px;

}
.men_u
{
background-color:silver;
//border:0.2px solid blue;
color:blacK:
}
.men_u:hover
{
background:blue;
color:white;
//border:0.2px solid blacK;
}
.menu
{
position: absolute;
Left:76%;Top:7px;
overflow:Auto;
height:95%;
border:1 px solid black;
width:17%;
//background-color: #FF9999;
background-image: url('texture.gif');

color:#669933;
text-shadow:  #DDD 5px 5px 2px;
}
.men
{
width:6%;
height:95%;
border:1px solid red;
position: absolute;
Left:93%;Top:7px;

}
body
{
font-family: Arial, "MS Trebuchet", sans-serif;
background-color: #FF99C9;

}
img
{

}
.menu_a
{
cursor: move;

}
  div#Rahmen {
    width:100%
    height:55px
    padding: 0.8em;
    border: 1px solid black;
background-image:url('8stesec0.jpg');
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 10.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }


</style>
<script type="text/javascript" src="wz_dragdrop.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></script>
<script type="text/javascript" src="webtoolkit.piemenu.js"></script>
<script type="text/JavaScript" src="ajax.js"></script>
<script type="text/javascript" src="prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script> 
<script type="text/JavaScript">
function toggledisplay(divId){
if(document.getElementById(divId).style.display=='none')
document.getElementById(divId).style.display='block';
else document.getElementById(divId).style.display='none';}
</script>

   <script type="text/javascript">
   function toogleElementShowNoShow(div)
{
if(document.getElementById(div).style.display == "block")
{
document.getElementById(div).style.display == "none";
}
else if(document.getElementById(div).style.display == "none")
{
document.getElementById(div).style.display == "block"
}

}
var MausX = 0;
var MausY = 0


function dragStart(e)
{

document.getElementById(e).style.border = '1px red solid';

}
function drag_it(e)
{
        MausX = document.all ? window.event.x : e.pageX;
        MausY = document.all ? window.event.y : e.pageY;
document.getElementById(e).Top = document.MouseX;
document.getElementById(e).Left = document.MouseY;
}
function dragEnd(e)
{
document.getElementById(e).style.border = '1px green solid';
window.Status='Teil abgelegt.';
}

//document.onmousemove = mouseMove;
//document.onmouseup   = mouseUp;

var dragObject  = null;
var mouseOffset = null;

function getMouseOffset(target, ev){
    ev = ev || window.event;

    var docPos    = getPosition(target);
    var mousePos  = mouseCoords(ev);
    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
    var left = 0;
    var top  = 0;

    while (e.offsetParent){
        left += e.offsetLeft;
        top  += e.offsetTop;
        e     = e.offsetParent;
    }

    left += e.offsetLeft;
    top  += e.offsetTop;

    return {x:left, y:top};
}
function mouseCoords(ev){
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }
    return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop  - document.body.clientTop
    };
}

function mouseMove(ev){
    ev           = ev || window.event;
    var mousePos = mouseCoords(ev);

    if(dragObject){
dragObject.style.position = 'absolute';
dragObject.style.top      = mousePos.y - mouseOffset.y + "px";
dragObject.style.left     = mousePos.x - mouseOffset.x + "px";

        return false;
    }
}
function mouseUp(){
    dragObject = null;
}

function makeDraggable(item){
    if(!item) return;
    item.onmousedown = function(ev){
        dragObject  = this;
        mouseOffset = getMouseOffset(this, ev);
        return false;
    }
}
 document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
window.onload = function(){
  makeDraggable(document.getElementById('p2'));  
}
/*
new Draggable("p1",{revert: true});
new Draggable("p2",{revert: true});
new Draggable("p3",{revert: true});
new Draggable("p4",{revert: true});
Droppables.add("grassa",{onDrop: alert('Objekt in den Garten abgelegt.')});
*/
 </script>   
</head>

<script type="text/javscript">
window.onload = function()
{
PieContextMenu.attach('grassa', 'menu1');
}
</script>


<body >
            <ul id="menu1" class="PieContextMenu" style="display: none;">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
<!--
  <div id="Rahmen"><ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>

    <li><a href="#Beispiel">Seite 2</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>

      </ul>
    </li>

    <li><a href="#Beispiel">Haus Designen</a></li>

    <li><a id="aktuell" href="#Beispiel">L&auml;den</a>
      <ul>
        <li><a href="#Beispiel">G&auml;rtner</a></li>

        <li><a href="">Supermarkt</a></li>
        <li><a href="#Beispiel">andere</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Tiere...</a></li>
  </ul><div></div></div>
-->

<Div class="grass" id="grassa">
<noscript><font color="red">Bitte aktiviere Javascript,um diese Seite zu nutzen</noscript>
&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>
&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>
&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>
&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>
</div>
<div class="menu" id="menu"><b onclick="toggledisplay('m1')">Pflanzenwahl:</b>
<a name="top_ss"></a>
<span id="m1">
<br> 
<span class="menu_a"  id="p1">
<img src="8gazrig0.jpg">
</SPAN>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a"  id="p2">
<img src="8tagere1.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a"  id="p3">
<img src="acacmela.png">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a"  id="p4">
<img src="acersac1.png">
</span>
<br>

<a href="#top_ss"><span style="color:green;">Top</span></a><br>
</span>
<!--++++++++++++++++++++++++++++++++++++-->
<b onclick="toggledisplay('m2')">Lampen/Laternen</b><br>
<span id="m2">
<span class="menu_a">
<img src="/home/tristan/Desktop/img/light01.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/light02.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/light05.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/light06.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/light07.jpg">
</span>
<br>
<a href="#top_ss"><span style="color:green;">Top</span></a><br>
</span>
<!--++++++++++++++++++++++++++++++++++++-->
<b onclick="toggledisplay('m4')">Pflastersteine</b><br>
<!--++++++++++++++++++++++++++++++++++++-->
<span id="m4">
<span class="menu_a">
<img src="/home/tristan/Desktop/img/paver02.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<!--++++++++++++++++++++++++++++++++++++-->
<!--++++++++++++++++++++++++++++++++++++-->
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/paver14.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<a href="#top_ss"><span style="color:green;">Top</span></a><br>
</span>
<b onclick="toggledisplay('m3')">Z&auml;une</b><br>

</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/fence01.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/fence02.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/fence3.gif">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/fence18.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<br>
<span class="menu_a">
<img src="/home/tristan/Desktop/img/grate01.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/gravel07.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/gravel14.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->

<br>
<a href="#top_ss"><span style="color:green;">Top</span></a><br>
</span>
<b onclick="toggledisplay('m5')">Laufsteine</b>
<span id="m5"><br>
<span class="menu_a">
<img src="/home/tristan/Desktop/img/STONE7sm.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/stone_ff.png">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/stone_ff_2.png">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/stone_ff3.png">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/stone_ff4.png">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/stone_ff5.png">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/stone_ff6.png">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/stone_ff7.png">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/stucco03.jpg">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/stone4.png">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<span class="menu_a">
<img src="/home/tristan/Desktop/img/stone_ff2.png">
</span>
<br>
<!--++++++++++++++++++++++++++++++++++++-->
<a href="#top_ss">Top</a>
</span>
</div>   
<script type="text/JavaScript">
function alerta(text,icon)
{
document.getElementById('alerta_text').innerHTML = "Meldung:<br>" + text + "<br>";
document.getElementById('alerta_pict').src = icon;
//toggledisplay('alerta');
Effect.Grow('alerta', { from: 0, to: 1 });
}
</script>
<div class="men">
<span class="men_u" onclick="toggledisplay('men1')" name="men_u">Tiere</span>
<span class="men_u"><img src="/home/tristan/Desktop/img/img/diag.png" alt="diag.png" onclick="alerta('Die Statistik ist leider gerade geschlossen.','img/error.png');"></span>
</div>
<span id="men1" style="position:absolute;Left:73.1%;Top:5px;width:20%;display:none;background-color:silver;" >
<span class="men_u" onclick="fuettern()">F&uuml;ttern</span><br />
<span class="men_u" onclick="pflegen()">Pflegen </span><br />
<span class="men_u" onclick="trick()">Trick beibringen </span><br />
<span class="men_u" onclick="treffen()"><img  src="img/people.png" style="width:20px;height:20px;">Treffen</span><br />
</span>
<div id="alerta" style="display:block;Position:absolute;Left:30%;Top:42%;width:35%;height:30%;overflow:auto;background:rgb(200,145,35);">
<span style="background-image:url('top_bg.gif');color:green;"><img src="close.gif" alt="X" style="position:absolute;Left:95%;" onclick="toggledisplay('alerta')"></span><br>
<center>
<img src="img/info.png;" id="alerta_pict">
</center>
<br>
<center>
<span id="alerta_text" style="color:white;">Es ist kein Text vorhanden.</span>
</center>

<span align="bottom">
<center>
<input type="button" value="OK" style="width:15%;color:green;background-color:black;" onclick="Effect.Shrink('alerta', { from: 1, to: 0 });">
</input>
<input type="button" value="Hilfe" style="width:25%;color:white;background-color:black;">
</input>
</center>
</span>
</div>
</body>
</html>
 
Hi,

@OnlyFoo - sicherlich ist es geschickter und konformer, Funktionen grundsätzlich erst aufzurufen, nachdem sie deklariert wurden. Ich selbst verfahre gewöhnlich auch nach diesem Prinzip. Da es aber bei der Lösung zu obigen Problem nichts beigetragen hätte, habe ich ihren Ort im Quellcode nicht verändert.

Zu den Einheiten gibt es folgendes anzumerken:
- im IE ist es tatsächlich egal, ob die Einheiten angegeben werden oder nicht
- im FF z.B. macht es dagegen einen Unterschied, ob er im Quirks oder einem standardkonformen Modus läuft.

Ciao
Quaese
 
Das Problem ist die von OnlyFoo erwähnte Schleife in getPosition().

Da sich das DragObjekt in einem positionierten Container befindet, beziehen sich neue Positionsangaben auf die x/y-Werte des Elterncontainers und nicht auf die des Body.
 
Zurück