nicht angemeldet
Ein kleines denk-spiel für Kinder ab 5 Jahren
Hi.
ich habe den Auftrag, ein kleines Spiel für kinder ab 5 Jahren zu erstellen. Inhalt ist folgendermaßen:
Via Drag&Drop soll man verschiedene Bilder in ein Rahmen hineinziehen. Der Rahmen hat einen Namen. Und wenn man die Bilder da reinzieht, sollen die Bilder zu dem Namen passen ...
derzeit habe ich nur die "debug"-Version mit 3 Feldern und ein paar Texten gebastelt ...
Nun bräuchte ich vielleicht einen Tip, wie ich an die Inhalten in den Feldern herankomme, wenn man "stopDrag()" startet ...
Bitte keine Kommentare über HTML und fehlende Tags ... Derzeit läuft es auf IE (und Phase5-Html-Editor-Browser) fließend. Es soll letztendlich auch auf keinem anderen laufen. Das Drag&Dropscript habe ich mir aus dem Internet gezogen und noch nicht verfeinert ... (z. B. die Browserweichen entfernt)
hier der komplette Code:
<html>
<head>
<title>Test</title>
<meta name="author" content="Griever">
<meta name="language" content="de">
<!--<script language="JavaScript" src="scr.js"></script>-->
<script>
var dragElement;
var elY;
var mouseDownY;
var targetlist=new Array()
function getPageX(element) {
var x = 0;
do
x += element.offsetLeft;
while ((element = element.offsetParent));
return x;
}
function getPageY(element) {
var y = 0;
do
y += element.offsetTop;
while ((element = element.offsetParent));
return y;
}
function startDrag(element, evt) {
dragElement = element;
if (document.layers) {
elY = dragElement.top;
elX = dragElement.left;
mouseDownY = evt.pageY;
mouseDownX = evt.pageX;
document.captureEvents(Event.MOUSEMOVE);
}
else if (document.all || document.getElementById) {
elY = getPageY(dragElement);
elX = getPageX(dragElement);
mouseDownY = evt.clientY;
mouseDownX = evt.clientX;
}
document.onmousemove = drag;
}
function drag(evt) {
if (document.layers)
{
dragElement.top = elY + evt.pageY - mouseDownY;
dragElement.left = elX + evt.pageX - mouseDownX;
}
else if (document.all)
{
dragElement.style.pixelTop = elY + event.clientY - mouseDownY;
dragElement.style.pixelLeft = elX + event.clientX - mouseDownX;
secsave=new Array(dragElement.style.pixelTop,dragElement.style.pixelLeft,dragElement)
}
else if (document.getElementById)
{
dragElement.style.top = (elY + evt.clientY - mouseDownY) + 'px';
dragElement.style.left = (elX + evt.clientX - mouseDownX) + 'px';
}
}
var secsave = new Array(0,0,null)
function stopDrag () {
document.onmousemove = null;
pruefgang(secsave[0],secsave[1],secsave[2])
dragElement = null;
if (document.layers)
document.releaseEvents(Event.MOUSEMOVE);
}
if (document.layers) {
document.aDiv.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
document.aDiv.onmousedown = function (evt) {
startDrag(this, evt);
};
document.aDiv.onmouseup = function (evt) {
stopDrag();
};
}
function init() {
var a = document.getElementsByTagName("DIV")
var zaehler=0
for(var i in a)
{
if(a[i].className=="dragelem")
{
a[i].onmousedown = new Function("startDrag(this, event);")
a[i].onmouseup = new Function("stopDrag();")
a[i].style.position = "absolute"
a[i].style.top = 10+((i)*21)+"px"
zaehler++
}
}
for(var i in a)
{
if(a[i].className=="dragtarg")
{
a[i].number=i
a[i].style.height=(((zaehler/3)*21)+3)+"px"
targetlist[targetlist.length]=new Array(a[i].style.pixelTop,a[i].style.pixelLeft,a[i].style.pixelTop+a[i].offsetHeight,a[i].style.pixelLeft+a[i].offsetWidth,0)
}
}
}
function pruefgang(top,left,obj,nachbrenn) {
var is = false
for(var i in targetlist)
{
if(top < targetlist[i][2] && top > targetlist[i][0])
{
if(left < targetlist[i][3] && left > targetlist[i][1])
{
obj.style.pixelTop = (targetlist[i][0]+2)+((targetlist[i][4]-1)*21)
obj.style.pixelLeft = (targetlist[i][1]+2)
obj.style.width=(targetlist[i][3]-targetlist[i][1])-4
obj.isin="true"
if(obj.number != i)
{
if(obj.number != null)
{
targetlist[obj.number][4]--;
}
obj.number=i
targetlist[i][4]++
}
is = true
}
}
}
if(is==false)
{
obj.isin="false"
if(targetlist[obj.number])
targetlist[obj.number][4]--;
obj.number=null
var a = document.getElementsByTagName("DIV")
for(var i in a)
{
if(a[i].className=="dragelem")
{
if(a[i].isin!="true")
a[i].style.top = 10+((i)*21)+"px"
}
}
obj.style.width=""
obj.style.pixelLeft = 10
}
}
window.onload=init
</script>
</head>
<style>
div.dragelem {
background:#FDF3EA;
border:1px solid black;
padding-top:1px;
padding-bottom:2px;
padding-left:5px;
padding-right:6px;
cursor:hand;
font-size:12px;
font-family:Arial;
font-weight:normal;
z-index:1000;
}
</style>
<body onselectstart="return false" onmouseup="stopDrag();">
<div class="dragelem">Kleines Feld</div>
<div class="dragelem">Mittleres Feld</div>
<div class="dragelem">Großes Feld</div>
<div class="dragelem">Kleines Feld</div>
<div class="dragelem">Mittleres Feld</div>
<div class="dragelem">Großes Feld</div>
<div class="dragelem">Kleines Feld</div>
<div class="dragelem">Mittleres Feld</div>
<div class="dragelem">Großes Feld</div>
<div class="dragtarg" style="position:absolute;top:15px;left:190px;width:100px;height:100px;border:1px solid black;z-index:0;"></div>
<div class="dragtarg" style="position:absolute;top:130px;left:190px;width:130px;height:100px;border:1px solid black;z-index:0;"></div>
<div class="dragtarg" style="position:absolute;top:245px;left:190px;width:160px;height:100px;border:1px solid black;z-index:0;"></div>
</body>
</html>
MFG
Griever
-
hi,
Nun bräuchte ich vielleicht einen Tip, wie ich an die Inhalten in den Feldern herankomme, wenn man "stopDrag()" startet ...
Es geht also darum, das Element zu ermitteln, über dem "gedroppt" wird?
Schau dir mal in der MSDN die diversen Events an, die was mit dem drag-gen zu tun haben - z.B. ondrop.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hi,
Nun bräuchte ich vielleicht einen Tip, wie ich an die Inhalten in den Feldern herankomme, wenn man "stopDrag()" startet ...
Es geht also darum, das Element zu ermitteln, über dem "gedroppt" wird?
Nein ...
Nachträglich sollen in jedem "target" die Elemente geprüft werden ...
So, dass man im nachhinein erst seine Fehler sieht ... So war das gemeint ... Lerneffekt solls ja auch geben ... :)
-
hi,
Es geht also darum, das Element zu ermitteln, über dem "gedroppt" wird?
Nein ...
Nachträglich sollen in jedem "target" die Elemente geprüft werden ...
Definiere "nachträglich" :-)
Also am "Ende" des Spiels?So, dass man im nachhinein erst seine Fehler sieht ... So war das gemeint ... Lerneffekt solls ja auch geben ... :)
Nun, dazu musst du trotzdem wissen, welches Element wo abgelegt wurde - und das ermittelst du am besten zu dem Zeitpunkt, wo es abgelegt _wird_.
Wann du darauf reagierst, ob dies jetzt "richtig" oder "falsch" war, ist ja eine vollkommen andere Sache.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Definiere "nachträglich" :-)
Also am "Ende" des Spiels?Jup.
Nun, dazu musst du trotzdem wissen, welches Element wo abgelegt wurde - und das ermittelst du am besten zu dem Zeitpunkt, wo es abgelegt _wird_.
Wann du darauf reagierst, ob dies jetzt "richtig" oder "falsch" war, ist ja eine vollkommen andere Sache.Mir schwant eine Lösung ...
Vielleicht ist "Array" mein perfektes Stichwort ... :)
Aber da habe ich immernoch das Problem, dass 1. die Elemente in den feldern nicht nachsortiert werden können (hab zumindest keine passige lösung gefunden), wenn man z. Beispiel das oberste Item rausnimmt und noch andere drin liegen. und 2. dass ich nicht wüßte, wie ich das exakte Element herausnehmen soll aus dem Array, wenn es entweder in eine andere Box verschoben wird oder aus der box genommen wird.
MFG
Griever
-
-
-