www.webdeveloper.com
Results 1 to 3 of 3

Thread: hey, what am i doing wrong???

  1. #1
    Join Date
    Jun 2011
    Posts
    1

    hey, what am i doing wrong???

    my code:
    <html>
    <head>
    <script type="text/javascript">

    var DragHandler = {


    // private property.
    _oElem : null,


    // public method. Attach drag handler to an element.
    attach : function(oElem) {
    oElem.onmousedown = DragHandler._dragBegin;

    // callbacks
    oElem.dragBegin = new Function();
    oElem.drag = new Function();
    oElem.dragEnd = new Function();

    return oElem;
    },


    // private method. Begin drag process.
    _dragBegin : function(e) {
    var oElem = DragHandler._oElem = this;

    if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
    if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }

    var x = parseInt(oElem.style.left);
    var y = parseInt(oElem.style.top);

    e = e ? e : window.event;
    oElem.mouseX = e.clientX;
    oElem.mouseY = e.clientY;

    oElem.dragBegin(oElem, x, y);

    document.onmousemove = DragHandler._drag;
    document.onmouseup = DragHandler._dragEnd;
    return false;
    },


    // private method. Drag (move) element.
    _drag : function(e) {
    var oElem = DragHandler._oElem;

    var x = parseInt(oElem.style.left);
    var y = parseInt(oElem.style.top);

    e = e ? e : window.event;
    oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
    oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';

    oElem.mouseX = e.clientX;
    oElem.mouseY = e.clientY;

    oElem.drag(oElem, x, y);

    return false;
    },


    // private method. Stop drag process.
    _dragEnd : function() {
    var oElem = DragHandler._oElem;

    var x = parseInt(oElem.style.left);
    var y = parseInt(oElem.style.top);

    oElem.dragEnd(oElem, x, y);

    document.onmousemove = null;
    document.onmouseup = null;
    DragHandler._oElem = null;
    }

    }
    </script>
    </head>
    <body>
    <img style="position:absolute" src="movedown.gif" width="32" id="pic" height="32" onclick="DragHandler('pic')"/>
    </body>
    </html>




    so, howcome i cant drag that img on screen??? plz help

  2. #2
    Join Date
    Jan 2005
    Posts
    349
    Correct me if I'm wrong, but you haven't actually defined a function called DragHandler - just an object of the same name that contains various bits and pieces.
    Either your definition is not quite what you intended, or else you are not calling it right.

  3. #3
    Join Date
    Mar 2011
    Posts
    61
    All you need to do is call DragHandler.attach with the element as an argument, when the DOM is done loading.
    There's no need to attach events to the element yourself.
    Code:
    <script>
    window.onload = function(){
     var el = document.getElementById('pic');
     DragHandler.attach(el);
    };
    </script>
    <img style="position:absolute" src="movedown.gif" width="32" id="pic" height="32">

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles