Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,803
    Thanks
    19
    Thanked 157 Times in 148 Posts

    drag and drop script

    I wrote the following script, but it's giving me an error in IE and I can;t figure out why:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
    
    <head>
    
    <title>Drag-and-Drop Demo</title>
    
    <link rel="stylesheet" type="text/css" href="" />
    
    <style type="text/css">
    <!--
    
    #div1, #div2, #div3
    {
        position:absolute;
        background-color:#eee;
        border:1px solid #000;
        cursor:move;
    }
    
    #div1 p, #div2 p, #div3 p
    {
        font:bold 12px Verdana, Arial;
        text-align:center;
        margin-top:30px;
    }
    
    -->
    </style>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    <script type="text/javascript">
    <!--
    
    var divObj;
    var pxFromLeft;
    var pxFromTop;
    var x;
    var y;
    
    function dragIt(id,event)
    {
        if (document.getElementById(id) != divObj)
        {
            var divContainer = document.getElementById("container");
            var myDivs = divContainer.getElementsByTagName("div");
            for (i=0; i<myDivs.length; i++)
            {
                if (myDivs[i].style.zIndex == 100)
                    myDivs[i].style.zIndex = 50;
                else
                    myDivs[i].style.zIndex = 0;
            }
        }
    
        divObj = document.getElementById(id);
        divObj.style.zIndex = 100;
    
        pxFromLeft = divObj.offsetLeft;
        pxFromTop = divObj.offsetTop;
    
        if (event.pageX || event.pageY)
        {
            x = event.pageX;
            y = event.pageY;
        }
        else
        {
            x = event.clientX;
            y = event.clientY;
        }
    
        var widthArr = divObj.style.width.split("px");
        var heightArr = divObj.style.height.split("px");
    
        if (x >= pxFromLeft && x <= pxFromLeft + parseInt(widthArr[0]) && y >= pxFromTop && y <= pxFromTop + parseInt(heightArr[0]))
        {
                document.onmousemove = dragIt2;
    
                // prevent text selection in IE
                document.onselectstart = function()
                {
                    return false;
                };
    
                // prevent text selection (except IE)
                document.onmousedown = function()
                {
                    if (typeof event.preventDefault != 'undefined')
                        event.preventDefault();
                };
        }
    }
    
    function dragIt2(event)
    {
        if (event == null)
            event = window.event;
    
        if (event.pageX || event.pageY)
        {
            var a = event.pageX;
            var b = event.pageY;
        }
        else
        {
            var a = event.clientX;
            var b = event.clientY;
        }
    
        if (x > a)
            var moveX = -(x - a);
        else if (x < a)
            var moveX = a - x;
    
        if (y > b)
            var moveY = -(y - b);
        else if (y < b)
            var moveY = b - y;
    
        divObj.style.left = pxFromLeft+moveX+"px";
        divObj.style.top = pxFromTop+moveY+"px";
    
        document.onmouseup = dragIt3;
    }
    
    function dragIt3()
    {
        document.onmousemove = null;
        document.onselectstart = null;
    }
    
    -->
    </script>
    
    </head>
    
    <body>
    
    <div id="container">
        <div id="div1" style="top:25px;left:25px;width:400px;height:75px" onmousedown="dragIt('div1',event);">
            <p>Click and drag me!</p>
        </div>
        <div id="div2" style="top:125px;left:25px;width:300px;height:75px" onmousedown="dragIt('div2',event);">
            <p>Click and drag me!</p>
        </div>
        <div id="div3" style="top:225px;left:25px;width:200px;height:75px" onmousedown="dragIt('div3',event);">
            <p>Click and drag me!</p>
        </div>
    </div>
    
    </body>
    
    </html>
    The error in IE is:

    Line 120 - Error: Invalid argument
    This is line 120:

    Code:
    divObj.style.left = pxFromLeft+moveX+"px";
    Any ideas? Thanks.
    Last edited by chump2877; 01-12-2007 at 08:35 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In the function dragIt2 you are missing the = case for the x/a and y/b tests. So sometimes moveX and moveY are undefined. That appears to be the problem.

    david_kw

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,803
    Thanks
    19
    Thanked 157 Times in 148 Posts
    Thanks!

    Code:
        if (x > a)
            var moveX = -(x - a);
        else if (x < a)
            var moveX = a - x;
        else
            var moveX = 0;
    
        if (y > b)
            var moveY = -(y - b);
        else if (y < b)
            var moveY = b - y;
        else
            var moveY = 0;
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •