Hallo, ich habe folgendes Problem:
Es gibt ja hier ein beispiel für Drag&Drop für Div-Bereiche. Das Problem ist, das wenn man in diesen ein Bild einfügt, dieses nicht mehr richtig funktioniert (firefox, ie,...). Erstaunlicher weise klappt aber alles Korrekt mit der mittleren Maustaste.
Das muss was mit dem automatischen Drag&Drop des <img> zu tun haben, um z.B. das Bild in ein Verzeichnis abzulegen.
Eine Lösung wäre das Bild als Hintergrundbild einzufügen, aber das muss doch noch anderes gehen!?
Hier noch mal der Code:
<html>
<head>
<title>Drag-and-Drop</title>
<script type="text/javascript">
<!-- gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4
//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;
// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;
// Mausposition
var posx = 0;
var posy = 0;
function draginit() {
// Initialisierung der Überwachung der Events
document.onmousemove = drag;
document.onmouseup = dragstop;
}
function dragstart(element) {
//Wird aufgerufen, wenn ein Objekt bewegt werden soll.
dragobjekt = element;
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
return false;
}
function dragstop() {
//Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
dragobjekt=null;
return false;
}
function drag(e) {
//Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
posx = document.all ? window.event.clientX : e.pageX;
posy = document.all ? window.event.clientY : e.pageY;
if(dragobjekt != null) {
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
}
return false;
}
//-->
document.onmousedown = new Function('e','if(((e = e || window.event).target || e.srcElement).tagName == "IMAGE") return false;');
</script>
</head>
<body onload="draginit()">
<div onmousedown="dragstart(this)" style="position:absolute;top:200px;left:0px;height:100px;width:100px;background:#00ff00">
<img src="bildervorlader/2.JPG" alt="2.JPG, 1827 kB" title="2" height="111" width="111">
</div>
<div onmousedown="dragstart(this)" style="position:absolute;top:100px;left:0px;height:100px;width:100px;background:#00ff00">
<img src="bildervorlader/1.JPG" alt="2.JPG, 1827 kB" title="2" height="111" width="111">
</div>
</div>
</body>
</html>