[thelist] JS and Dragging in IE5

Fri May 24 14:37:01 CDT 2002

Hi Everyone,

This is my first real post to ask a question. I'm working on a project where we want to make some
draggable controls, its IE5+ only. I'm using some of Danny Goodman's code, with the NN6/W3C DOM
stuff taken out. It essentially works, but not the way I want it to.

What I want to be able to do is to drag the "knob" even if your mouse comes off the target (the
knob) or if you drag it too fast (it seems dragging the mouse too quick where it exceeds the width
of the knob stops the drag - the evt.ClientX value). I want it to work more like your windows
scroll bars as it were - you have some play with it once you click on it to drag it around.

I don't know if you can attach files so I just pasted the code below (its not up on any site right
now). So paste it in your own editor and load it if you want to see it -- its all self contained.
You'll note I'm using VML as the objects to drag not DIVs...long story. That also is not part of
the problem (same problem with DIVs).

Thanks!

Tom

code below
=================================================
<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 : ""
	var targElem = evt.srcElement
	if (engaged) {
		if (targElem.className == "draggable") {
			targElem.style.left = evt.clientX - offsetX - controlOffset + "px"
			return false
		}
	}
}

function engage(evt) {
	evt = (window.event) ? window.event : ""
	var 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 : ""
	var targElem = evt.srcElement
	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>

__________________________________________________
Do You Yahoo!?
LAUNCH - Your Yahoo! Music Experience
http://launch.yahoo.com