Dom Drag "Handle" div problem

**1Riptide** · 06-15-2007, 04:03 PM

1) Script Title:
dom-drag.js

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex11/domdrag/

3) Describe problem:

Hi Folks. First off, thanks to Aaron Boodman for some awsome work. This script works perfectly out of the box - with minimal effort. Thanks for taking the time man!

Now, for my problem. I am trying to exand up on the basic functionality of the script to only allow dragging via a predefined "handle" div - which itself is a childElement of the div you want to drag.

When I try the example - the handle div is draggable, but the parent (container) div does not move with the handle. Its like the handle pops out of the parent (z-order) and does its own thing.

I have tried several variations, and have spent a good amount of time in the code - but cannot figure it out.

Even stranger, there is a link to a working example that does EXACTLY what I want it to do, located here:
http://www.dynamicdrive.com/dynamici...ag/example.htm

BUT when I view/source and copy out the exact markup - the example no longer works on my local machine, and the wierd behavior I described above takes place (the handle gets dragged, but the contents do not). WIERD!
The same markup works great until I pull it down to my machine.

heres some distilled code - I removed a bunch of stuff that is not relevent to the problem at hand (a swf for example).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <link rel="stylesheet" type="text/css" href="css/Style.css" />
   	<script type="text/javascript" src="js/swfobject.js"></script>
   	<script type="text/javascript" src="js/swfobject_js_gateway.js"></script>
   	<script type="text/javascript" src="js/dom-drag.js"></script>
</head>
<body >
<div id="VideoPop" class="videoPopOverWrapper"> 
 <div id="FlashVideoContainer"></div>
 <script type="text/javascript">
    // <![CDATA[
 //There is a swf element embedded here (swfobject)- removed for brevity    // ]]>
	 </script> 
	<br />
	<br />
 </div>
 <div id="DragHandle" class="DragHandle"></div>
</div>
<script type="text/javascript" language="javascript">
var theHandle2 = document.getElementById("DragHandle");
var theWrapper = document.getElementById("VideoPop");
Drag.init(theWrapper, theHandle2);
</script>

</body>
</html>

Even better - here is the code from the WORKING example : (remeber - this same code works here: http://www.dynamicdrive.com/dynamici...ag/example.htm
Can you make it work? I am unsuccessfull - though the demo works fine. What gives????

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Draggable handle example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="../../ddincludes/devstyle.css" />
<script type="text/javascript" src="dom-drag.js"></script>

<style type="text/css">
	#root {
		position:absolute;
		height:300px;
		width:300px;
		background-color:#F4F4F4;
		border:1px solid #333;
		}

	#handle {
		margin:2px;
		padding:2px;
		width: 98%;
		color:white;
		background-color: navy;
		font-weight: bold;
		}
</style>
</head>

<body>

<p id="pathlinks"><a href="http://www.dynamicdrive.com/">Home</a> 
<img border="0" src="../../ddincludes/arrow2.gif" width="8" height="10" />                                                        
<a href="http://www.dynamicdrive.com/dynamicindex11/">Other</a> 
<img border="0" src="../../ddincludes/arrow2.gif" width="8" height="10" />
<a href="index.htm">DOM Drag script</a> 
<img border="0" src="../../ddincludes/arrow2.gif" width="8" height="10" /> 
Draggable handle example</p>

<div id="root" style="left:50px; top:100px;">
	<div id="handle">Handle</div>
	Some text
</div>

<script language="javascript">
	var theHandle = document.getElementById("handle");
	var theRoot   = document.getElementById("root");
	Drag.init(theHandle, theRoot);
</script>

</body>

</html>

Has anyone else had this problem?
Thanks in adv!
-casey

**1Riptide** · 06-15-2007, 04:12 PM

Sorry, forgot to mention, I am working with Moz and IE7.

Also, heres another waaaay distilled code sample:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="js/dom-drag.js"></script>
</head>
<body>
<div id="root" style="left:50px; top:100px;">
	<div id="handle">Handle</div>
	Some text
</div>
<script language="javascript" type="text/javascript">
	var theHandle = document.getElementById("handle");
	var theRoot   = document.getElementById("root");
	Drag.init(theHandle, theRoot);
</script>
	</body>
</html>

Thread: Dom Drag "Handle" div problem

Thread Tools

Search Thread

Dom Drag "Handle" div problem

Bookmarks

Bookmarks

Posting Permissions