Beim IExplorer klappt das auf die Art und Weise, aber Mozilla macht noch was er will...
Ich habe das ganze noch ein wenig verändert und dafür ein script, das ich hier gefunden habe, ein bisschen ausgebaut. Ich stelle es einfach mal hier hin, das spart lange erklärungen...
Wie gesagt, beim IE klappt es jetzt wie ich es mir wünsche, aber die anderen...
hier der code (hab die Stellen, wos nicht klappt mit kommentaren belegt..):
HTML:
<html>
<head>
<title></title>
<meta name="author" content="admin">
</head>
<body>
<style>
.draggableElement {
position: absolute;
z-index:5;
}
.layableElement {
position: absolute;
z-index:5;
}
#d4{
width:45px;
height:50px;
background-image:url(leer.gif);
}
#d1 {
width:45px;
height:50px;
background-image:url(brot2.gif);
}
</style>
<script language="JavaScript">
<!--
var selectedElement;
var layElement;
var startposx = 0;
var startposy = 0;
function findDraggableElement (target) {
if (document.layers) { //fuer zB Netscape
if (target.constructor == Document) {
for (var l = 0; l < document.layers.length; l++)
if (target == document.layers[l].document)
return document.layers[l];
}
else if (target.constructor == Image) {
for (var l = 0; l < document.layers.length; l++)
for (var i = 0; i < document.layers[l].document.images.length; i++)
if (target == document.layers[l].document.images[i])
return document.layers[l];
}
return null;
}
else if (document.all) { //fuer zB IExplorer
do
if (target.className == 'draggableElement')
return target;
while ((target = target.parentElement));
return null;
}
else if (document.getElementById) { //fuer zB Mozilla
do
if (target.className == 'draggableElement')
return target;
while ((target = target.parentNode));
return null;
}
}
//KOPIE: /////////////////
function findLayableElement (target) {
if (document.layers) { //fuer zB Netscape
if (target.constructor == Document) {
for (var l = 0; l < document.layers.length; l++)
if (target == document.layers[l].document)
return document.layers[l];
}
else if (target.constructor == Image) {
for (var l = 0; l < document.layers.length; l++)
for (var i = 0; i < document.layers[l].document.images.length; i++)
if (target == document.layers[l].document.images[i])
return document.layers[l];
}
return null;
}
else if (document.all) { //fuer zB IExplorer
do
if (target.className == 'layableElement')
return target;
while ((target = target.parentElement));
return null;
}
else if (document.getElementById) { //fuer zB Mozilla
do
if (target.className == 'layableElement')
return target;
while ((target = target.parentNode));
return null;
}
}
function checkSelection (evt) {
if (document.layers) { //fuer zB Netscape
selectedElement = findDraggableElement (evt.target);
if (selectedElement) {
document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousemove = drag;
}
}
else if (document.all) { //fuer zB IExplorer
selectedElement = findDraggableElement (event.srcElement);
if (selectedElement) {
document.onmousemove = drag;
}
}
else if (document.getElementById) { //fuer zB Mozilla
selectedElement = findDraggableElement (evt.target);
if (selectedElement) {
document.onmousemove = drag;
}
}
}
//KOPIE:////////////////
function checkSelection2 (evt) {
if(selectedElement) {
if (document.layers) { //fuer zB Netscape
layElement = findLayableElement (evt.target);
if (layElement) {
alert("Hier ablegen1");
selectedElement.left = /*!!*/ layElement.left; /*!! konnte ich noch nicht testen !!*/
selectedElement.top = /*!!*/ layElement.top; /*!! auch noch nicht...!! */
document.releaseEvents(Event.MOUSEMOVE);
document.onmousemove = null;
selectedElement = null;
layElement = null;
}
}
else if (document.all) { //fuer zB IExplorer !! POSITIONIERUNG KLAPPT FEHLERFREI!!
layElement = findLayableElement (event.srcElement);
if (layElement) {
selectedElement.style.posLeft = (layElement.offsetLeft+layElement.offsetParent.offsetLeft);
selectedElement.style.posTop = (layElement.offsetTop+layElement.offsetParent.offsetTop);
document.onmousemove = null;
selectedElement = null;
layElement = null;
} else {
selectedElement.style.posLeft = 100;
selectedElement.style.posTop = 100;
document.onmousemove = null;
selectedElement = null;
layElement = null; }
}
else if (document.getElementById) { //fuer zB Mozilla
layElement = findLayableElement (evt.target);
if (layElement) {
selectedElement.style.left = /* */ layElement.style.left; /* KLAPPT NICHT*/
selectedElement.style.top = /* */ layElement.style.top; /* KLAPPT NICHT*/
document.onmousemove = null;
selectedElement = null;
layElement = null;
} else {
selectedElement.style.left = 100;
selectedElement.style.top = 100;
document.onmousemove = null;
selectedElement = null;
layElement = null; }
}
}
}
function drag (evt) {
if(selectedElement) {
if (document.layers) { //fuer zB Netscape
selectedElement.left = evt.pageX+20;
selectedElement.top = evt.pageY+20;
}
else if (document.all) { //fuer zB IExplorer
selectedElement.style.posLeft = event.clientX+20;
selectedElement.style.posTop = event.clientY+20;
}
else if (document.getElementById) { //fuer zB Mozilla
selectedElement.style.left = (evt.clientX+20) + 'px';
selectedElement.style.top = (evt.clientY+20) + 'px';
}
}
}
if (document.layers) //fuer zB Netscape
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
document.onmousedown = checkSelection;
document.onmouseup = checkSelection2;
if (document.all) //fuer zB IExplorer
document.onselectstart = document.ondragstart = function () {
return false;
};
//-->
</script>
<noscript></noscript>
<div id="d1" class="draggableElement">
</div><br><br><br>
<input type="Text" id="d34" value="" size="" maxlength="">
<center><div align="center" style="z-index:1;position:absolute;left:300px;top:300px;width:400px;height:400px;">
<div id="d4" class="layableElement"></div></div></center>
</body>
</html>
wie man sieht, sollte das ganze eigentlich klappen, aber entweder stimmt irgendwas mit der belegung des layElement nicht, oder die befehle für die passende Kompatiblität stimmen nicht. kenne mich mit den befehlsunterschieden von browser zu browser leider nicht so gut aus, weiß nur, wie ich im IE schaffe was ich brauch, und alles, was nicht dynamisch ist, klappt dann auch immer im mozilla, aber das hier macht mir sorgen...
thx for your help!
