Drag script..mouse moves too quick

glenelkins · February 18, 2008

Hi

Please take a look at the code below to create some simple boxes and make them dragable. The boxes drag fine, but only if they are dragged left to right, or top to bottom not both directions at the same time ( I.e diagonal ). If they are dragged diagonally the mouse moves away from the box because it moves too slowly.

Copy and paste the code to see what i mean. First just drag say down, the mouse stays fixed. Now move diagonally ...

How can i fix this?

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<script language="javascript">

/*** VARIABLES ***/
var _event;
var _node;
var _node_parent;
var _dragging = false;
var _mouse_x;
var _mouse_y;

/*** DEBUG DATA ***/
/*** These details are used to generate the boxes whilst in development ***/

// Array to store all boxes
// TOP, LEFT, WIDTH, HEIGHT, DRAG BAR - WIDTH, HEIGHT
var _Boxes = new Array();

_Boxes[0] = new Array ( 0, 0, 400, 100, 400, 10 );
_Boxes[1] = new Array ( 120, 0, 400, 100, 400, 10 );
_Boxes[2] = new Array ( 0, 410, 400, 200, 400, 10 );

/*** EVENTS ***/
document.onmousedown = MouseDown;
document.onmousemove = MouseMove;
document.onmouseup = MouseUp;

/*** FUNCTIONS ***/

// Function to generate box display
function generate_boxes() {

	var box_display = "";

	for ( var i = 0; i < _Boxes.length; i++ ) {

		var box_top = _Boxes[i][0];
		var box_left = _Boxes[i][1];
		var box_width = _Boxes[i][2];
		var box_height = _Boxes[i][3];
		var drag_bar_width = _Boxes[i][4];
		var drag_bar_height = _Boxes[i][5];
		var content_height = box_height - drag_bar_height;

		// First create the drag bar
		drag_bar = "<div id='dragbar_" + i + "' style='position: relative; top: 0px; left: 0px; width: " + drag_bar_width + "px; height: " + drag_bar_height + "px; background: red;'></div>";

		// The box
		box_display = "<div id='dragbox_" + i + "' style='position: absolute; top: " + box_top + "px; left: " + box_left + "px; width: " + box_width + "px; height: " + box_height + "px; margin: 0px; padding: 0px; border: 1px solid #000000;'>" + drag_bar + "<div style='position: relative; width: " + box_width + "px; height: " + content_height + "px; background: green;'>Content</div></div>";

		// Show the box	
		show_display ( box_display );

	}

}

// Detect mouse down
function MouseDown( eve ) {

	// Get the window event
	if ( window.event ) {

		_event = window.event;

	} else {

		_event = eve;

	}

	// Detect which element was clicked
	if ( _event.target ) {

		_node = _event.target;

	} else {

		_node = _event.srcElement;

	}

	// Check we have selected a DIV and its a drag handle
	if ( _node.nodeName == "DIV" ) {

		// Get the node' id
		var node_id = _node.getAttribute ( "id" );

		if ( node_id.search ( "dragbar" ) > -1) {

			// We have selected a drag bar

			// Get the drag bars parent object
			var node_parent_id = _node.parentNode.getAttribute ( "id" );
				_node_parent = document.getElementById ( node_parent_id );

			// Get the mouse position
			get_mouse_position ( eve );

			// Set dragging to true
			_dragging = true;

		}

	}

}

// Moue move function
function MouseMove ( eve ) {

	if ( _dragging == true ) {

		// Get the window event
		if ( window.event ) {

			_event = window.event;

		} else {

			_event = eve;

		}

		// Get the mouse position
		if ( _event.clientX && _event.clientY ) {

			var tmp_mouse_x =  _event.clientX;
			var tmp_mouse_y = _event.clientY;

		} else {

			var tmp_mouse_x = _event.pageX;
			var tmp_mouse_y = _event.pageY;

		}				

		if ( tmp_mouse_x > _mouse_x ) {

			// Move the box right by the difference
			var x_diff = tmp_mouse_x - _mouse_x;
			var x_new = parseInt ( remove_px ( _node_parent.style.left ) ) + x_diff;

			_node_parent.style.left = x_new + "px";

			// Update the mouse position
			get_mouse_position ( eve );					

		} else if ( tmp_mouse_x < _mouse_x ) {

			// Move the box left
			var x_diff = _mouse_x - tmp_mouse_x;
			var x_new = parseInt ( remove_px ( _node_parent.style.left ) ) - x_diff;

			_node_parent.style.left = x_new + "px";

			// Update the mouse
			get_mouse_position ( eve );

		}

		if ( tmp_mouse_y > _mouse_y ) {

			var y_diff = tmp_mouse_y - _mouse_y;
			var y_new = parseInt ( remove_px ( _node_parent.style.top ) ) + y_diff;

			_node_parent.style.top = y_new + "px";

			// Update mouse
			get_mouse_position ( eve );

		} else if ( tmp_mouse_y < _mouse_y ) {

			var y_diff = _mouse_y - tmp_mouse_y;
			var y_new = parseInt ( remove_px ( _node_parent.style.top ) ) - y_diff;

			_node_parent.style.top = y_new + "px";

			// update mouse
			get_mouse_position ( eve );

		}

	}


}

// Mouse up
function MouseUp ( eve ) {

	// Set dragging to false
	_dragging = false;

	// If the dropped position is smaller or equal to 400px
	// snap left

	if ( _mouse_x <= 400 ) {

		_node_parent.style.left = 0 + "px";

	} else if ( _mouse_x > 400 ) { // snap right

		_node_parent.style.left = 410 + "px";

	}

}

// Get mouse position
function get_mouse_position ( eve ) {

	// Get the window event
	if ( window.event ) {

		_event = window.event;

	} else {

		_event = eve;

	}

	// Get the mouse position
	if ( _event.clientX && _event.clientY ) {

		_mouse_x =  _event.clientX;
		_mouse_y = _event.clientY;

	} else {

		_mouse_x = _event.pageX;
		_mouse_y = _event.pageY;

	}

}

function remove_px ( the_string ) {

	var string_array = the_string.split ( "p" );

	return string_array[0];

}	
// Show the display function
function show_display ( display ) {

	document.getElementById ( "display_area" ).innerHTML += display;

}

</script>
</head>

<body onload = "generate_boxes();">

<div id="display_area"></div>

</body>

</html>

markjoe · February 22, 2008

I am rather confused by your code and feeling too lazy to put the time into it right now. But, I made a slider for a volume control recently and my test page was a drag-able button. Even though my slider is 1D, the test page is 2D. Here is the code, maybe it can help.

Oh, and I did save the page and I see what you are talking about. It is nothing short of weird.

<script type="text/javascript">
var F=null;
var S=null;

function grab(e,scope){
e.target.style.position='absolute';
S=scope;
F=e.target
}
function letGo(){
F=null;
}
function drag(e){
var el=document.getElementById('div1');
el.innerHTML=e.clientX+' x '+e.clientY;
if(F){
	if(S=='h'){ F.style.left=e.clientX+'px'; }
	else if(S=='v'){ F.style.top=e.clientY+'px'; }
	else{ F.style.left=e.clientX+'px';
		F.style.top=e.clientY+'px'; }
}
}
document.onmousemove=drag;
</script>
<body>
<button onmousedown="grab(event);" onmouseup="letGo();">Drag Me</button><br />
<div id="div1" style="font-size:9px;"></div>
</body>

glenelkins · February 22, 2008

hi it doesnt matter now lol...i changed to code completely to limit the areas where the boxes can be dragged to maintain more control over things...so the mouse pointer issue isnt a problem now

Sign In

Drag script..mouse moves too quick

Recommended Posts

glenelkins

Link to comment

Share on other sites

markjoe

Link to comment

Share on other sites

glenelkins

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information