[thelist] draggable control bug, the black x thingy

Tom Dell'Aringa pixelmech at yahoo.com
Thu Jun 6 17:31:01 CDT 2002

(sorry if this is a double post - couldn't tell if it went through or not)

I've been working on this project where I have some draggable controls which are hooked up to some
other stuff. The elements drag and so forth no problem.

But they don't work quite well enough. The problem is that sometimes you get the black "do not
enter" icon when you try to drag -- as if you tried to select some static text and drag it off the
page or something, and the item won't drag. But then you click off and on and it might be fine. Or
even worse, you click off but the mouseUp does not fire and the knob moves as you move your mouse
without the mouse down.

So my question is two-fold: 1) It would be great if someone might make some suggestions on my code
(pasted below). It is dynamic to allow any object that has a class "draggable" to be dragged. In
my actual version, we do have background images instead of colored buttons, but I don't think that
is an issue.

2) Is all drag code like this, is this just "the nature of the beast"? I realize in a sense, HTML
was not made for this sort of thing. I know there are all kinds of DHTML APIs and libraries out
there, but I liked this code because it was terse, and its mostly mine now so its not copyrighted.

I don't want to drag some huge library or api and start over, but if I have to I will I guess.
This only has to work in IE right now so don't bother with cross-browser comments.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script language="javascript">
/ Mouse functions for dragging controls

function mouseDown(e)
	if (event.button != 1) return;	//disable drag with right button

	//get object
	elem = event.srcElement

	if(elem.className == "draggable")
		knob = elem.style;
		knob.xpos = elem.offsetLeft;
		knob.ypos = elem.offsetTop;
		knob.w = elem.clientWidth;
		knob.h = elem.clientHeight;

		//since controls are in a container, we need to find the parent location
		//offsetParent will be troublesome for NN6... (read bust)
		pElement = document.getElementById(elem.id).offsetParent
		pElement.xpos = pElement.offsetLeft;
		pElement.ypos = pElement.offsetTop;

		//adjust x,y positions of knob based on container location
		knob.xpos = knob.xpos + pElement.xpos
		knob.ypos = knob.ypos + pElement.ypos

		//check for window scroll (should pretty much never happen)
		var x = event.x + document.body.scrollLeft;
		var y = event.y + document.body.scrollTop;

		//makes sure you grabbed the knob, sets drag to active
		if ((x > knob.xpos) && (x < knob.xpos + knob.w) && (y > knob.ypos) && (y < knob.ypos + knob.h))
			isActive = true;
			dragObject = knob;
			dragObject.dragOffsetX = x - dragObject.xpos;

		// Doesn't seem that we need below code...just drag the thing...
		/*if (isActive == true)
			//keep checking for knob position while dragging?
			if ((x >= dragObject.xpos) && (x <= dragObject.xpos + dragObject.w))
				//where 'x' is on the knob
				dragObject.dragOffsetX = x - dragObject.xpos;
			return false; //cancel drag
			return true;

function mouseMove(e) {
	var x = event.x;
	var y = event.y;

	if (isActive) {

		sliderMin = 68;
		sliderMax = 310;

		rMoveTo = x - dragObject.dragOffsetX;
			if (rMoveTo > sliderMax) rMoveTo = sliderMax;
			if (rMoveTo < sliderMin) rMoveTo = sliderMin;
		knob.xpos = rMoveTo;

		if (knob.xpos > sliderMax) return true;

		knob.left = knob.xpos - 5; //5 is the offset of the container

function mouseUp(e) {
	var x = event.x + document.body.scrollLeft;
	var y = event.y + document.body.scrollTop;
	isActive = false;

function init()
   	document.onmousedown = mouseDown
	document.onmousemove = mouseMove
	document.onmouseup = mouseUp
	isActive = false;

onload = init;

<div id="controlBase" style="background-color: silver; position: absolute; top: 205; left: 5;
width: 330; height: 89; z-index: 0;">

	<div id="manKnob" class="draggable" style="position:absolute; left:63; top:46; width:14;
height:14; z-index:2; cursor: hand; background-color: red; clip:rect(auto auto 14 auto);"></div>

	<div id="pitKnob" class="draggable" style="position:absolute; left:63; top:68; width:14;
height:14; z-index:2; cursor: hand; background-color: red; clip:rect(auto auto 14 auto);"></div>


Do You Yahoo!?
Yahoo! - Official partner of 2002 FIFA World Cup

More information about the thelist mailing list