[thelist] JS and Dragging in IE5

Fri May 24 16:08:01 CDT 2002

Hi,
Try this version:

<html xmlns:v ="urn:schemas-microsoft-com:vml">
<head>
<title>3D VML</title>
<style>
v\:* { behavior: url(#default#VML); }
</style>
<SCRIPT LANGUAGE="JavaScript">
var engaged = false
var offsetX = 0
var controlOffset = 20

function dragIt(evt) {
evt = (window.event) ? window.event : ""
 if (engaged) {
  if (targElem.className == "draggable") {
   targElem.style.left = evt.clientX - offsetX - controlOffset + "px"
   return false
  }
 }
}

function engage(evt) {
 evt = (window.event) ? window.event : ""
 targElem = evt.srcElement
 if (targElem.className == "draggable") {
  engaged = true
  offsetX = evt.offsetX - document.body.scrollLeft
  return false
 }
}

function release(evt) {
evt = (window.event) ? window.event : ""
if (targElem.className == "draggable") {
while (targElem.id != "knob" && targElem.parentNode) {
targElem = targElem.parentNode
}
if (engaged && targElem.id == "knob") {
engaged = false

}
}
}

//handle events
document.onmousedown = engage
document.onmouseup = release
document.onmousemove = dragIt
//document.onmouseout = release
</SCRIPT>
</head>

<body>

<!-- slider control -->

<div id="viewerControl" style="display: block; position: absolute; top: 100;
left: 20;
border-style: solid; border-color: silver; border-width: 1px; width: 400;
height: 350;">

<v:rect id="slider"
fillcolor="white"
strokecolor="black"
style="position:absolute; top:10; left:10; width:300; height:10">
</v:rect>

<v:rect id="knob" class="draggable"
fillcolor="red"
strokecolor="black"
style="position:absolute; top:10; left:250; width:55; height:10">
</v:rect>

</div>

<input type="button" value="Hide" onclick="javascript:
document.getElementById('viewerControl').style.display = 'none';"> <input
type="button"
value="Show" onclick="javascript:
document.getElementById('viewerControl').style.display =
'block';">

</body>
</html>