Klon inerhalb eines bestimmten Bereiches ablegen

BonsaiGirl · 02.09.2011, 17:28

Hallo Leute,
steh gerade bei meinem Projekt ein wenig auf der Leitung.
In meinem Projekt geht es darum, dass man Dino-Bilder auf eine Zeitleiste (ebenfalls ein Bild) ziehen kann.
Das funktioniert so indem der angeklickte Dino beim mousedown geklont wird und die funktion move aufgerufen wird und man den Dino so nun verschieben kann. Soweit so gut jetzt soll bei mouseup also wenn man die maus wieder loslässt der Dino nur wenn er in einem gewissen Bereich ist abgelgt werden ansonsten soll der Klon gelöscht werden. Die Dinos werden ja auf eine horizintale Zeitleiste gezogen und können über auf bzw. unter dieser platziert werden aber nur in einem gewissen Bereich, da die Zeitleiste in versch. Zeitzonen eingeteilt ist. Ich hoff ihr versteht was ich meine und könnt mir helfen. (Ich könnte ja auch zb. ein Div über diesen Bereich ziehen und den Dino dann da reinverschieben, weiß aber net wie ich des machen soll)
Hier mal der Code:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js" type="text/javascript"></script>
<title>Evolution</title>
</head>
<body onmousedown="down(event)" onmousemove="move(event)" onmouseup="up(event)">
<div style="background:url(background.png) no-repeat;" id="navi">
	<img src="logo.png" align="absmiddle"/><span style="font-size:80px; font-family:Marker Felt;">EVOLUTION</span>
    <br/>
    <a href="index.html"><img src="navibtn1.png" style="border:none;"/></a>
    <a href="canvas.html"><img src="navibtn2.png" style="border:none;" /></a>
    <img onclick="show(this)" style="cursor:pointer;" src="navibtn3.png" />
</div>
<div id="dinos">
<h2>Die Dinos</h2>
   
    <img src="Dinos/apatosaurus.gif" id="apatosaurus" style="border:none;" dragdrop="yes"/> 
    <img src="Dinos/archaeopteryx.png" style="border:none;" dragdrop="yes" />
    
    <img src="Dinos/brachiosaurus.png" style="border:none;" dragdrop="yes" />
    
    <img src="Dinos/crassigyrinus.png" style="border:none;" dragdrop="yes" />
    
    <img src="Dinos/dimetrodon.png"  style="border:none;" dragdrop="yes"/>
    
    <img src="Dinos/eoraptor.png" style="border:none;" dragdrop="yes"/>
    
    <img src="Dinos/eurypterus.png" style="border:none;" dragdrop="yes"/>
    
    <img src="Dinos/fisch.png" style="border:none;" dragdrop="yes"/>
    
    <img src="Dinos/hylonomus.png" style="border:none;" dragdrop="yes" />
 
    <img src="Dinos/ichthyostega.png" style="border:none;" dragdrop="yes"/>
    
    <img src="Dinos/lungenfisch.png" style="border:none;" dragdrop="yes"/>
    
    <img src="Dinos/megatherum.png" style="border:none;" dragdrop="yes"/>
    
    <img src="Dinos/plateosaurus.png" style="border:none;" dragdrop="yes"/>
   
    <img src="Dinos/seymouria.png" style="border:none;" dragdrop="yes"/>
    
    <img src="Dinos/smilodon.png" style="border:none;" dragdrop="yes"/>
   
    <img src="Dinos/triceratops.png" style="border:none;" dragdrop="yes"/>
  
    <img src="Dinos/trilobit.gif" style="border:none;" dragdrop="yes"/>
  
    <img src="Dinos/t-rex.png" style="border:none;" dragdrop="yes"/>
  
    <img src="Dinos/urerde.png" style="border:none;" dragdrop="yes"/>
    </div>
</div>
<br/><br/><br/><br/><br/>
<div id="content">
    <img src="Zeitleiste-neu.png" style="border:none;"/><br/>
    <img id="solution" src="solution.png" style="visibility:hidden;" />
</div>
<div id="footer">
<img src="footer.png" style="border:none"; />
</div>
</body>
</html>

und hier die Funktionen dazu:

PHP-Code:

  var el = null;

var dx = null;

var dy = null;

 
function down(evt){          //Also hier werden die Dinos geklont und die Funktion Move aufgerufen

    if (evt.preventDefault) {

        evt.preventDefault(); // The W3C DOM way

    } else {

        evt.returnValue = false; // The IE way

    }

    

    if(evt.target){

        el=evt.target;  //w3c

    }else{

        el=evt.srcElement;   //internet explorer

    }

 
    while(el.tagName != "HTML"){

    

    

        if(el.getAttribute("dragdrop") == "yes"){

            

            clone1 = document.getElementById("apatosaurus").cloneNode(true);

            document.body.appendChild(clone1);

            clone1.style.position = "absolute";    

            clone1.setAttribute("dragdrop", "no", 0);

 
            

            dx = el.offsetLeft - evt.clientX;

            dy = el.offsetHeight / 2;

            

            clone1.style.left = (evt.clientX + dx) + "px";

            clone1.style.top = (evt.clientY - dy) + "px";

            //dy = offsetTop - evt.clientY; --> Problem mit Scroll-Bereich

            el.style.cursor = "move";

            break;

        }

        el = el.parentNode;

    }

}

 
function move(evt){ //Hier die Funktion Move

    if (evt.preventDefault) {

        evt.preventDefault(); // The W3C DOM way

    } else {

        evt.returnValue = false; // The IE way

    }

    

    if(el != null){

        clone1.style.left = (evt.clientX + dx) + "px";

        clone1.style.top = (evt.clientY - dy) + "px";

    }

 
}

 
function up(evt){  //So und hier liegt das Problem, hier soll der Klon des Dinos eben nur dann abgelgt werden wenn sich dieser in einem bestimmten Bereich befindet, ansonsten soll er gelöscht werden

    if (evt.preventDefault) {

        evt.preventDefault(); // The W3C DOM way

    } else {

        evt.returnValue = false; // The IE way

    }    

 
if (clone1.style.left == "750px" && clone1.style.top == "490px"){

    el.style.cursor = "auto";

    clone1 = null;

}else {

    clone1.delete;

}

 
}

 
function show(){

    document.getElementById("solution").style.visibility =     "visible";

}

ChrisB · 02.09.2011, 19:46

Bitte beachten: http://www.php.de/php-einsteiger/ann..._Multipostings

http://phpforum.de/forum/showthread.php?t=264839

*close*

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

02.09.2011, 17:28
BonsaiGirl Benutzer Registriert seit: 27.10.2010 Beiträge: 69 PHP-Kenntnisse: Anfänger	Klon inerhalb eines bestimmten Bereiches ablegen Hallo Leute, steh gerade bei meinem Projekt ein wenig auf der Leitung. In meinem Projekt geht es darum, dass man Dino-Bilder auf eine Zeitleiste (ebenfalls ein Bild) ziehen kann. Das funktioniert so indem der angeklickte Dino beim mousedown geklont wird und die funktion move aufgerufen wird und man den Dino so nun verschieben kann. Soweit so gut jetzt soll bei mouseup also wenn man die maus wieder loslässt der Dino nur wenn er in einem gewissen Bereich ist abgelgt werden ansonsten soll der Klon gelöscht werden. Die Dinos werden ja auf eine horizintale Zeitleiste gezogen und können über auf bzw. unter dieser platziert werden aber nur in einem gewissen Bereich, da die Zeitleiste in versch. Zeitzonen eingeteilt ist. Ich hoff ihr versteht was ich meine und könnt mir helfen. (Ich könnte ja auch zb. ein Div über diesen Bereich ziehen und den Dino dann da reinverschieben, weiß aber net wie ich des machen soll) Hier mal der Code: Code: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="script.js" type="text/javascript"></script> <title>Evolution</title> </head> <body onmousedown="down(event)" onmousemove="move(event)" onmouseup="up(event)"> <div style="background:url(background.png) no-repeat;" id="navi"> <img src="logo.png" align="absmiddle"/><span style="font-size:80px; font-family:Marker Felt;">EVOLUTION</span> <br/> <a href="index.html"><img src="navibtn1.png" style="border:none;"/></a> <a href="canvas.html"><img src="navibtn2.png" style="border:none;" /></a> <img onclick="show(this)" style="cursor:pointer;" src="navibtn3.png" /> </div> <div id="dinos"> <h2>Die Dinos</h2> <img src="Dinos/apatosaurus.gif" id="apatosaurus" style="border:none;" dragdrop="yes"/> <img src="Dinos/archaeopteryx.png" style="border:none;" dragdrop="yes" /> <img src="Dinos/brachiosaurus.png" style="border:none;" dragdrop="yes" /> <img src="Dinos/crassigyrinus.png" style="border:none;" dragdrop="yes" /> <img src="Dinos/dimetrodon.png" style="border:none;" dragdrop="yes"/> <img src="Dinos/eoraptor.png" style="border:none;" dragdrop="yes"/> <img src="Dinos/eurypterus.png" style="border:none;" dragdrop="yes"/> <img src="Dinos/fisch.png" style="border:none;" dragdrop="yes"/> <img src="Dinos/hylonomus.png" style="border:none;" dragdrop="yes" /> <img src="Dinos/ichthyostega.png" style="border:none;" dragdrop="yes"/> <img src="Dinos/lungenfisch.png" style="border:none;" dragdrop="yes"/> <img src="Dinos/megatherum.png" style="border:none;" dragdrop="yes"/> <img src="Dinos/plateosaurus.png" style="border:none;" dragdrop="yes"/> <img src="Dinos/seymouria.png" style="border:none;" dragdrop="yes"/> <img src="Dinos/smilodon.png" style="border:none;" dragdrop="yes"/> <img src="Dinos/triceratops.png" style="border:none;" dragdrop="yes"/> <img src="Dinos/trilobit.gif" style="border:none;" dragdrop="yes"/> <img src="Dinos/t-rex.png" style="border:none;" dragdrop="yes"/> <img src="Dinos/urerde.png" style="border:none;" dragdrop="yes"/> </div> </div> <br/><br/><br/><br/><br/> <div id="content"> <img src="Zeitleiste-neu.png" style="border:none;"/><br/> <img id="solution" src="solution.png" style="visibility:hidden;" /> </div> <div id="footer"> <img src="footer.png" style="border:none"; /> </div> </body> </html> und hier die Funktionen dazu: PHP-Code: var el = null; var dx = null; var dy = null; function down(evt){ //Also hier werden die Dinos geklont und die Funktion Move aufgerufen if (evt.preventDefault) { evt.preventDefault(); // The W3C DOM way } else { evt.returnValue = false; // The IE way } if(evt.target){ el=evt.target; //w3c }else{ el=evt.srcElement; //internet explorer } while(el.tagName != "HTML"){ if(el.getAttribute("dragdrop") == "yes"){ clone1 = document.getElementById("apatosaurus").cloneNode(true); document.body.appendChild(clone1); clone1.style.position = "absolute"; clone1.setAttribute("dragdrop", "no", 0); dx = el.offsetLeft - evt.clientX; dy = el.offsetHeight / 2; clone1.style.left = (evt.clientX + dx) + "px"; clone1.style.top = (evt.clientY - dy) + "px"; //dy = offsetTop - evt.clientY; --> Problem mit Scroll-Bereich el.style.cursor = "move"; break; } el = el.parentNode; } } function move(evt){ //Hier die Funktion Move if (evt.preventDefault) { evt.preventDefault(); // The W3C DOM way } else { evt.returnValue = false; // The IE way } if(el != null){ clone1.style.left = (evt.clientX + dx) + "px"; clone1.style.top = (evt.clientY - dy) + "px"; } } function up(evt){ //So und hier liegt das Problem, hier soll der Klon des Dinos eben nur dann abgelgt werden wenn sich dieser in einem bestimmten Bereich befindet, ansonsten soll er gelöscht werden if (evt.preventDefault) { evt.preventDefault(); // The W3C DOM way } else { evt.returnValue = false; // The IE way } if (clone1.style.left == "750px" && clone1.style.top == "490px"){ el.style.cursor = "auto"; clone1 = null; }else { clone1.delete; } } function show(){ document.getElementById("solution").style.visibility = "visible"; }


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

02.09.2011, 19:46
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Bitte beachten: http://www.php.de/php-einsteiger/ann..._Multipostings http://phpforum.de/forum/showthread.php?t=264839 close __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?