-
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
-
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
Forum Rules
|
Top DevX Stories
Easy Web Services with SQL Server 2005 HTTP Endpoints
JavaOne 2005: Java Platform Roadmap Focuses on Ease of Development, Sun Focuses on the "Free" in F.O.S.S.
Wed Yourself to UML with the Power of Associations
Microsoft to Add AJAX Capabilities to ASP.NET
IBM's Cloudscape Versus MySQL
|
Reply With Quote
Bookmarks