Page 1 of 1

Drag & Drop image and save position in MySQL

Posted: Tue Apr 13, 2010 12:38 am
by Amstler
Hey guys, I needed a script to “arrange furniture in a room”. So I can drag and drop chairs or tables (images) in the room then save the position in MySQL. I have a drag and drop script working but I don't know how to save the x/y positioning.

Code: Select all

	<script language="JavaScript" type="text/javascript">
<!--

// this is simply a shortcut for the eyes and fingers
function $(id)
{
	return document.getElementById(id);
}

var _startX = 0;			// mouse starting positions
var _startY = 0;
var _offsetX = 0;			// current element offset
var _offsetY = 0;
var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0;			// we temporarily increase the z-index during drag
var _debug = $('debug');	// makes life easier


InitDragDrop();

function InitDragDrop()
{
	document.onmousedown = OnMouseDown;
	document.onmouseup = OnMouseUp;
}

function OnMouseDown(e)
{
	// IE is retarded and doesn't pass the event object
	if (e == null) 
		e = window.event; 
	
	// IE uses srcElement, others use target
	var target = e.target != null ? e.target : e.srcElement;
	
	_debug.innerHTML = target.className == 'drag' 
		? 'draggable element clicked' 
		: 'NON-draggable element clicked';

	// for IE, left click == 1
	// for Firefox, left click == 0
	if ((e.button == 1 && window.event != null || 
		e.button == 0) && 
		target.className == 'drag')
	{
		// grab the mouse position
		_startX = e.clientX;
		_startY = e.clientY;
		
		// grab the clicked element's position
		_offsetX = ExtractNumber(target.style.left);
		_offsetY = ExtractNumber(target.style.top);
		
		// bring the clicked element to the front while it is being dragged
		_oldZIndex = target.style.zIndex;
		target.style.zIndex = 10000;
		
		// we need to access the element in OnMouseMove
		_dragElement = target;

		// tell our code to start moving the element with the mouse
		document.onmousemove = OnMouseMove;
		
		// cancel out any text selections
		document.body.focus();
		
		// prevent text selection in IE
		document.onselectstart = function () { return false; };
		// prevent IE from trying to drag an image
		target.ondragstart = function() { return false; };
		
		// prevent text selection (except IE)
		return false;
	}
}

function ExtractNumber(value)
{
	var n = parseInt(value);
	
	return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e)
{
	if (e == null) 
		var e = window.event; 

	// this is the actual "drag code"
	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';

	_debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';	
	
//	_decoX = (_offsetX + e.clientX - _startX);
//	_decoY = (_offsetY + e.clientY - _startY);
//	_debug.innerHTML = _decoX + ' , ' + _decoY;
		
//	makeRequest('deco_location','','');
	
	<?php
/*						  mysql_select_db($database_yog_conn, $yog_conn);
						  $insertSQL = sprintf("INSERT INTO deco_cart WHERE deco_cart.orderID=".$row_Deco['orderID']." (x_pos, y_pos) VALUES (%s, %s)",
						                       GetSQLValueString(_decoX, "int"),
                       		   				   GetSQLValueString(_decoY, "int"));
						  
						  mysql_select_db($database_yog_conn, $yog_conn);
						  $Result1 = mysql_query($insertSQL, $yog_conn) or die(mysql_error());
*/
						  
	?>
}

function OnMouseUp(e)
{
	if (_dragElement != null)
	{
		_dragElement.style.zIndex = _oldZIndex;

		// we're done with these events until the next OnMouseDown
		document.onmousemove = null;
		document.onselectstart = null;
		_dragElement.ondragstart = null;

		// this is how we know we're not dragging
		_dragElement = null;
		
		_debug.innerHTML = 'mouse up';
	}
}
//-->
	</script>

Re: Drag & Drop image and save position in MySQL

Posted: Tue Apr 13, 2010 6:07 am
by roders
Try this out.
In the function OnMouseMove(e) remove the php part.
In the function OnMouseUp(e) add this below _debug.innerHTML = 'mouse up';
[text]poz=(_offsetX + e.clientX - _startX)+','+(_offsetY + e.clientY - _startY)
setposition(poz)[/text]
Under the funtion OnMouseUp(e) add this
[text]
var phpscript = 'setposition.php?';

function createRequestObject() {

var req;

if(window.XMLHttpRequest){
// Firefox, Safari, Opera...
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
// Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// There is an error creating the object,
// just as an old browser is being used.
alert('There was a problem creating the XMLHttpRequest object');
}

return req;

}

// Make the XMLHttpRequest object
var http = createRequestObject();

// Make the XMLHttpRequest object
var http = createRequestObject();

function setposition(xy) {

// Open PHP script for requests
count=-2;
http.open('post', phpscript);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//http.onreadystatechange = Ajaxposition;
http.send('set_poz='+xy);
}[/text]
Then create a php file save it as setposition.php and add this to it

Code: Select all

<?php
  mysql_select_db($database_yog_conn, $yog_conn);
  $position=explode(",",$_REQUEST['set_poz']);
  $insertSQL = sprintf("INSERT INTO deco_cart WHERE deco_cart.orderID=".$row_Deco['orderID']." (x_pos, y_pos) VALUES (%s, %s)",
					   GetSQLValueString($position[0], "int"),
				   	   GetSQLValueString($position[1], "int"));
 
  mysql_select_db($database_yog_conn, $yog_conn);
  $Result1 = mysql_query($insertSQL, $yog_conn) or die(mysql_error());

?>
Hopefully this should work.