Drag & Drop with pictures

Discussion in 'Javascript' started by sebastian.janoschka@googlemail.com, Dec 23, 2006.

  1. Guest

    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;

    }
    -----------------------------------
     
    , Dec 23, 2006
    #1
    1. Advertising

  2. Guest

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

    On 23 Dez., 21:19, ""
    <> 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;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;
    >
    > }-----------------------------------
     
    , Dec 23, 2006
    #2
    1. Advertising

  3. pcx99 Guest

    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!

    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;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;
    >
    > }
    > -----------------------------------
    >



    --
    http://www.hunlock.com -- Musings in Javascript, CSS.
    $FA
     
    pcx99, Dec 24, 2006
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Arvind Ghai

    Drag n drop from managed to unmanaged apps

    Arvind Ghai, Feb 15, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    595
    Arvind Ghai
    Feb 15, 2005
  2. alex9128
    Replies:
    1
    Views:
    613
  3. Ivo Tcholakov

    ASP.NET and Drag & Drop

    Ivo Tcholakov, Oct 17, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    538
    Jim Cheshire [MSFT]
    Oct 18, 2003
  4. Oliver Klein
    Replies:
    0
    Views:
    695
    Oliver Klein
    Aug 24, 2003
  5. Martin Raychev
    Replies:
    1
    Views:
    282
    Alvin Bruney [MVP]
    Mar 2, 2004
Loading...

Share This Page