By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,353 Members | 1,235 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,353 IT Pros & Developers. It's quick & easy.

Drag & Drop with pictures

P: n/a
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;

}
-----------------------------------

Dec 23 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
The script works correctly in IE... but the problems come with the
Firefox (Mozilla)

On 23 Dez., 21:19, "sebastian.janosc...@googlemail.com"
<sebastian.janosc...@googlemail.comwrote:
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;

}-----------------------------------
Dec 23 '06 #2

P: n/a

It's late so I'm not going to load this into a browser and test it so
this may all be completely wrong, or it might help you solve your problem.

When you put an image into your div (or anything really) the image has a
higher z-index than the division which means when the mouse is over that
image the events are going to be for the image, not the division underneath.

The solution is to attach the same onmousedown event to your image as
you do to your division. Well that would work save you're using "this"
to pass the element information. BTW "this" isn't all that reliable in
javascript.

Anyway, as a workaround you might try something like this..

<img src="images/elefant.jpg" onmousedown="bewege_bild(this.offsetParent)">

this.offsetParent basically should kick the object being passed to
bewege_bild up to your division (which is the parent of your image).

Another workaround would be to do one or two <BRbefore the image that
will leave some "raw" white space in your division which the user can grab.

If that doesn't work then hopefully someone else will pass by and help,
or I'll take a look at it all again tomorrow when I'm not
falling-down-tired.

Best of luck and Merry Christmas Eve!

se*****************@googlemail.com wrote:
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;

}
-----------------------------------

--
http://www.hunlock.com -- Musings in Javascript, CSS.
$FA
Dec 24 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.