PDA

View Full Version : 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/dynamicindex11/domdrag/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).



<!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/dynamicindex11/domdrag/example.htm
Can you make it work? I am unsuccessfull - though the demo works fine. What gives????



<!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:


<!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>