Drag and drop the image!

Discussion in 'Javascript' started by yihan, Jan 12, 2004.

  1. yihan

    yihan Guest

    Hi,
    I made a program to drag and drop the image using mouseevent, it only works
    on IE well, not on Netscape. Does anyone has the example suitable for
    Netscape? Please help. Thank you very much.

    yihan
    yihan, Jan 12, 2004
    #1
    1. Advertising

  2. yihan

    Fabian Guest

    yihan hu kiteb:

    > Hi,
    > I made a program to drag and drop the image using mouseevent, it only
    > works on IE well, not on Netscape. Does anyone has the example
    > suitable for Netscape? Please help. Thank you very much.


    Can you show us the code? It might only require minor tweaking to fit.
    And its something I want to do for one of my own projects too. You
    wouldn't want to save me loads of time would you :)


    --
    --
    Fabian
    Visit my website often and for long periods!
    http://www.lajzar.co.uk
    Fabian, Jan 12, 2004
    #2
    1. Advertising

  3. "Fabian" <> writes:

    > yihan hu kiteb:
    >> I made a program to drag and drop the image using mouseevent,


    > Can you show us the code? It might only require minor tweaking to fit.
    > And its something I want to do for one of my own projects too. You
    > wouldn't want to save me loads of time would you :)


    Very simple example (dragging, no effect on dropping):
    ---
    <script type="text/javascript">
    function dragImg(img,evt,how) {
    how = how || "relative";
    img.style.position = how;
    var root = document.documentElement || document.body;
    var x = img.xPos || (how == "relative" ? 0 : img.offsetLeft);
    var y = img.yPos || (how == "relative" ? 0 : img.offsetTop);
    var mx = evt.pageX || evt.clientX + root.scrollLeft;
    var my = evt.pageY || evt.clientY + root.scrollTop;
    document.onmousemove = function (evt){
    evt = evt || window.event;
    var newmx = evt.pageX || evt.clientX + root.scrollLeft;
    var newmy = evt.pageY || evt.clientY + root.scrollTop;
    x += newmx - mx;
    y += newmy - my;
    mx = newmx;
    my = newmy;
    img.style.left = x+"px";
    img.style.top = y+"px";
    img.style.outline="2px solid gray";
    img.style.zIndex = "1";
    return false;
    }
    document.onmouseup = function () {
    document.onmousemove = document.onmouseup = null;
    img.xPos = x;
    img.yPos = y;
    img.style.outline = img.style.zIndex = "";
    return false;
    }
    return false;
    }
    </script>
    ---
    with
    ---
    <img src="..." onmousedown="return dragImg(this,event)">
    ---
    or
    ---
    <img src="..." style="position:absolute;"
    onmousedown="return dragImg(this,event,'absolute')">
    ---

    Good luck.
    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Jan 12, 2004
    #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. R Steele

    Image Drag/Drop into ASP.Net Form?

    R Steele, Oct 22, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    840
    MasterGaurav
    Oct 23, 2005
  2. Oliver Klein
    Replies:
    0
    Views:
    685
    Oliver Klein
    Aug 24, 2003
  3. Jerry Barnes

    Drag and drop value from image map?

    Jerry Barnes, Apr 20, 2004, in forum: Javascript
    Replies:
    0
    Views:
    276
    Jerry Barnes
    Apr 20, 2004
  4. Brian D

    Drag and Drop image order to Database

    Brian D, Apr 18, 2005, in forum: Javascript
    Replies:
    3
    Views:
    85
    Matthew Lock
    Apr 20, 2005
  5. David Wake
    Replies:
    2
    Views:
    90
    David Wake
    Feb 27, 2006
Loading...

Share This Page