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