Hi,
I build my first Drag & Drop with JavaScript and I would like to drag
the pictures when I click on it.
When I create a normal div tag with some text the script works, but
when I put a image in the div tag it works not correctly.
Here is my Code... I integrated three pictures and one text, then you
can see the differences.
a part of my html site:
-----------------------------------
<body onload="autostart()">
<div id="part1">Hier eine Auswahl von Pics:</div>
<div id="bild">
<div onmousedown="bewege_bild(this)"
style="position:absolute;top:200px;left:0px;cursor :move;">
<img src="images/elefant.jpg">
</div>
<div onmousedown="bewege_bild(this)"
style="position:absolute;top:200px;left:150px;curs or:move;">
<img src="images/kaffee.jpg">
</div>
<div onmousedown="bewege_bild(this)"
style="position:absolute;top:200px;left:300px;curs or:move;">
<img src="images/ajax.jpg">
</div>
<div onmousedown="bewege_bild(this)"
style="position:absolute;top:200px;left:450px;curs or:move;">
HELLO
</div>
</div>
-----------------------------------
my JS Script:
-----------------------------------
// JavaScript Document
var posx;
var posy;
var dragx;
var dragy;
var dragobjekt = null;
function autostart() {
var bildDiv = document.getElementById("bild");
var bilder = bildDiv.getElementsByTagName("img");
for(var i=0; i<bilder.length; i++) {
bilder[i].onmousedown = bewege_bild;
}
document.onmouseup = dragStop;
document.onmousemove = drag;
}
function bewege_bild(to) {
dragobjekt = to;
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
}
function drag(Ereignis) {
posx = document.all ? window.event.clientX : Ereignis.pageX;
posy = document.all ? window.event.clientY : Ereignis.pageY;
if(dragobjekt != null) {
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
}
}
function dragStop() {
dragobjekt=null;
}
-----------------------------------
