Drag 'n' Drop mit JS

OnlyFoo · 26. August 2008

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...

Sven Mintel · 26. August 2008

ts230 hat gesagt.:
PHP:

window.onload = function(){ makeDraggable(document.getElementById('p2'));

Da fehlt eine geschweifte Klammer am Ende.

Des Weiteren könnte es von Interesse sein, wo sich #p2 in der Knotenstruktur des Dokumentes befindet.

OnlyFoo · 26. August 2008

Die Klammer ist denk ich nur Copy&Paste Fehler, und die Knotenstruktur dürfte nicht so viel ausmachen, wegen der Schleife in getPosition

ts230 · 26. August 2008

Sven Mintel hat gesagt.:
Da fehlt eine geschweifte Klammer am Ende.

die habe ich auch drinne.Aber es ist immernoch das gleiche Verhalten wie Vorher.
Ich hoffe,dieses SCRIPT unterstützt das Elemente Von 1 zum anderem DIV gezogen werden können.

Sven Mintel hat gesagt.:
Des Weiteren könnte es von Interesse sein, wo sich #p2 in der Knotenstruktur des Dokumentes befindet.

p2 befindet sich in einem DIV und nach dem JS.

Sven Mintel · 26. August 2008

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.

ts230 · 26. August 2008

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>

Quaese · 26. August 2008

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

Sven Mintel · 26. August 2008

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.

ts230 · 26. August 2008

@ Sven Mintel

Wie soll ich es dann machen?

Sven Mintel · 26. August 2008

Du könntest das DragObject beim ersten Draggen aus seinem Elterncontainer befreien und als Kindknoten in den Body clonen.

Drag 'n' Drop mit JS

OnlyFoo

Erfahrenes Mitglied

Sven Mintel

Mitglied

OnlyFoo

Erfahrenes Mitglied

ts230

Gesperrt

Sven Mintel

Mitglied

ts230

Gesperrt

Quaese

Moderator

Sven Mintel

Mitglied

ts230

Gesperrt

Sven Mintel

Mitglied

Neue Beiträge