Herausfinden, ob verschiebbares Onjekt über Element befindet?
0 0 
molily
Herausfinden, ob verschiebbares Onjekt über Element befindet?
Hallo,
ich habe ein paar draggable Objekte, die der Benutzer frei auf dem Bildschirm verschiebn kann. Wenn er die Maus loslässt, soll aber geprüft werden, ob er über einer bestimmten Tabelle und einem bestimmten Tabellenfeld losgelassen hat, oder nicht. Entscheidend wäre für mich die Mausposition beim Loslassen.
Wie kann ich feststellen, ob die Maus über einer Tabelle und über ein ganz bestimmtes Tabellenfeld losgelassen hat?
Mein Ziel ist es, dass das verschiebbare Objekt beim Loslassen in das entsprechende Tabellenfeld positioniert wird.
Das Veschiebbar machen von Elementen ist schonmal kein Problem.
Vielleicht gibts auch einen Link, wo bereits ähnliches gemacht wurde?
(Wie vielleicht bei einem Mühle-Spiel, wo man die Steine vom Rand auf das Spielfeld platziert.)
Gruß,
Euer Klaus
-
Hallo,
Wie kann ich feststellen, ob die Maus über einer Tabelle und über ein ganz bestimmtes Tabellenfeld losgelassen hat?
Mein Ziel ist es, dass das verschiebbare Objekt beim Loslassen in das entsprechende Tabellenfeld positioniert wird.
Eigentlich alle Bibliotheken, die »Draggables« unterstützen, kennen auch »Droppables«, das fügt einem Element genau das Verhalten hinzu, dass sie Draggables »empfangen« können. Welche Bibliothek verwendest du denn?
Mathias
-
Hallo,
Eigentlich alle Bibliotheken, die »Draggables« unterstützen, kennen auch »Droppables«, das fügt einem Element genau das Verhalten hinzu, dass sie Draggables »empfangen« können. Welche Bibliothek verwendest du denn?
Momentan verwende ich gar keine Bibliotheken. Subjektiv sind die mir immer etwas zu aufgebläht. Daher wollte ich mich selber an das bisschen Code versuchen.
Bisher hab ich auch nur ein Test-Script gebastelt, indem man die Grafiken bewegen kann.
Ich hab zwar einen Link bei Heise gefunden, wo inform eines einfachen Spiels auch die Eigenschaft gezeigt wird, die ich gerne realisieren würde, aber ich werd leider nicht so ganz schlau draus.
http://www.heise.de/ix/artikel/2001/07/166/01.shtml
Hier mein einfaches Test-Script:
<html>
<head>
<style>
.dragme { position:relative; }
</style>
<script language="JavaScript1.2">var ie=document.all;
var nn6=document.getElementById&&!document.all;var isdrag=false;
var x,y;
var dobj;function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");</script>
</head>
<body>
<img src="test1.jpg" class="dragme"><br>
<img src="test2.jpg" class="dragme"><br>
<h1><b class="dragme">Hi there</b></h1><table border="1" align="center">
<tr><td width="100" height="100"> Feld 1</td><td width="100" height="100"> Feld 2 </td></tr>
<tr><td width="100" height="100"> Feld 3</td><td width="100" height="100"> Feld 4 </td></tr>
</table>
</body>
</html>
-