Drag & Drop with pictures

  • Thread starter sebastian.janoschka
  • Start date
S

sebastian.janoschka

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;cursor:move;">
<img src="images/kaffee.jpg">
</div>

<div onmousedown="bewege_bild(this)"
style="position:absolute;top:200px;left:300px;cursor:move;">
<img src="images/ajax.jpg">
</div>

<div onmousedown="bewege_bild(this)"
style="position:absolute;top:200px;left:450px;cursor: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.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;

}
-----------------------------------
 
S

sebastian.janoschka

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

pcx99

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 <BR> before 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!

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;cursor:move;">
<img src="images/kaffee.jpg">
</div>

<div onmousedown="bewege_bild(this)"
style="position:absolute;top:200px;left:300px;cursor:move;">
<img src="images/ajax.jpg">
</div>

<div onmousedown="bewege_bild(this)"
style="position:absolute;top:200px;left:450px;cursor: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.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;

}
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Need help , Having problem with Drag n Drop... 1
Need help , Having problem with Drag n Drop ? 9
I am trying to detect Which image id="" was clicked ? 22
When draggable=false & draggable=true dont work ? 1
? Trouble with: passing dragElement(e.target.id); 8
Help with Visual Lightbox: Scripts 2
Help with my responsive home page 2
Please Help? 0

Members online

No members online now.
Total: 33 (members: 0, guests: 33)
Robots: 216

Forum statistics

Threads
473,756
Messages
2,569,535
Members
45,008
Latest member
obedient dusk

Latest Threads

Top