nicht angemeldet
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