Dragging an object


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2

Thread: Dragging an object

  1. #1
    Buddy Guest

    Dragging an object


    I'm trying to create a draggable element using DHTML and javascript. The
    procedure is pretty simple, just use the onmousedown and onmousemove events
    to sense when the left mouse button has been pressed and when it's being
    moved while the button is pressed. In those event procedures I just adjust
    the Top and Left properties of the element base on the distance the mouse
    has moved. The problem is, the combination of Javascript and DHTML seem
    to be too slow to move the object without the mouse sliding off the objec
    (which causes the dragging to stop). I know I've seen some websites using
    dragging wihtout this problem so, there must be a faster way. I'd like to
    know what that is.


    --Buddy

  2. #2
    Keith Salisbury Guest

    Re: Dragging an object

    hey buddy, try this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <META NAME="Author" CONTENT="Keith Salisbury">
    <META NAME="Keywords" CONTENT="Drag Layer">
    <style>
    <!--
    ..drag {position: relative; cursor: hand;}
    -->
    </style>
    <script language="JavaScript1.2">
    <!--
    var ie=document.all
    var ns6=document.getElementById&&!document.all
    var dragapproved=false
    var z,x,y
    function move(e){
    if (dragapproved){
    z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
    z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
    return false
    }
    }
    function drags(e){
    if (!ie&&!ns6) return
    var firedobj=ns6? e.target : event.srcElement
    var topelement=ns6? "HTML" : "BODY"
    while (firedobj.tagName!=topelement&&firedobj.className!="drag"){
    firedobj=ns6? firedobj.parentNode : firedobj.parentElement
    }
    if (firedobj.className=="drag"){
    dragapproved=true
    z=firedobj
    temp1=parseInt(z.style.left+0)
    temp2=parseInt(z.style.top+0)
    x=ns6? e.clientX: event.clientX
    y=ns6? e.clientY: event.clientY
    document.onmousemove=move
    return false
    }
    }
    document.onmousedown=drags
    document.onmouseup=new Function("dragapproved=false")
    //-->
    </script>
    </HEAD>
    <BODY>
    <div class="drag">hello i'm a layer</a>
    </BODY>
    </HTML>

    k-tech
    --
    http://ceeph.com
    http://globalkeith.com
    http://reasontemplates.com
    http://cvxml.org
    --





    "Buddy" <buddy__a@hotmail.com> wrote in message
    news:3d08c3bf$1@10.1.10.29...
    >
    > I'm trying to create a draggable element using DHTML and javascript. The
    > procedure is pretty simple, just use the onmousedown and onmousemove

    events
    > to sense when the left mouse button has been pressed and when it's being
    > moved while the button is pressed. In those event procedures I just

    adjust
    > the Top and Left properties of the element base on the distance the mouse
    > has moved. The problem is, the combination of Javascript and DHTML seem
    > to be too slow to move the object without the mouse sliding off the objec
    > (which causes the dragging to stop). I know I've seen some websites using
    > dragging wihtout this problem so, there must be a faster way. I'd like to
    > know what that is.
    >
    >
    > --Buddy




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
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center