www.webdeveloper.com
Results 1 to 4 of 4

Thread: drag and drop object -- Please Help!!!

  1. #1
    Join Date
    Sep 2009
    Posts
    3

    drag and drop object -- Please Help!!!

    I am new with javascript as far as really coding it as apposed to Dreamweaver javascript. I am trying to make an object or div able to be dragged and dropped.

    I have tried 3 different sets of code and not one of them has worked. I have gone through each word for word and the codes match with very little needed to be changed in relation to my html document.

    Does anyone have an easy working code for this or know of a site that has a good tutorial on this topic?

    I am desperate and would greatly appreciate any help or direction.

    thanks

  2. #2
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    Maybe you could post an example of one that doesn't work? or a link to a live complete page?
    ...but stupidity is terminal.

  3. #3
    Join Date
    Sep 2009
    Posts
    3
    Thanks again.

    HTML Code:
    <style type="text/css"> .draggableObj { position:relative; } </style> 
    
    <script type="text/javascript">
    
    var isIE = document.all;
    var isNN6=document.getElementById&&!document.all;
    
    var bDragging=false;
    var xPos,yPos;
    var draggableObject;
    
    function _mouseMove(e){
      if (bDragging){
        draggableObject.style.left = isNN6 ? txPos + e.clientX - xPos : txPos + event.clientX - xPos;
        draggableObject.style.top  = isNN6 ? tyPos + e.clientY - yPos : tyPos + event.clientY - yPos;
        return false;
      }
    }
    
    function _mouseSelect(e){
      var focusedObject       = isNN6 ? e.target : event.srcElement;
      var topelement = isNN6 ? "HTML" : "BODY";
    
      while (focusedObject.tagName != topelement && focusedObject.className != "draggableObj"){
        focusedObject = isNN6 ? focusedObject.parentNode : focusedObject.parentElement;
      }
    
      if (focusedObject.className=="draggableObj"){
        bDragging = true;
        draggableObject = focusedObject;
        txPos = parseInt(draggableObject.style.left+0);
        tyPos = parseInt(draggableObject.style.top+0);
        xPos = isNN6 ? e.clientX : event.clientX;
        yPos = isNN6 ? e.clientY : event.clientY;
        document.onmousemove=_mouseMove;
        return false;
      }
    }
    document.onmousedown=_mouseSelect;
    document.onmouseup=new Function("bDragging=false");
    
    </script>
    and the html
    HTML Code:
    <div class="draggableObj">such and such</div>

  4. #4
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    Appears to be something missing....
    take a look here. thera are a couple of drag and drop examples that are nice and work just fine.
    ...but stupidity is terminal.

Thread Information

Users Browsing this Thread

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

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