Drag and drop to a div and update MySQL

[dschuett]

Hi everyone. I am still very much in the learning phase of JQuery and AJAX, so your help is VERY much appreciated!

I have created a webpage that has two tables of invoice records, which are printed to the screen using a php while loop. The first table is a table that has rows of invoices that were recently added to the database - each row is its own invoice. (like an inbox). Any invoice in this table has a 'on_hold' value of '1' within the database.

The second table is a "Tickler" list (which is like a list of important "To-Do"). Any invoice in this table has an 'on_hold' value of '0' and a 'tickler' value of '1'.

Right now I have links you can click on (per row - that pass the 'id' etc.) that allow you to clear, edit, or add to tickler list. However, since I am trying to better my AJAX/JQuery skills I thought it would be cooler/a good learning tool if you could just drag and drop it into the tickler div/table and have it update the Database.

Here is what I'm working with:

<!--New Invoices-->
<div style="text-align:left;"><h1 style="margin-bottom:3px; margin-right:20px; margin-top:45px;">New Invoices</h1></div>
	<table align="center" id="printview" class="qresults">
		<tr style="background-color:#3366cc; color:white;">
			<th style="width:120px;">Invoice Number</th><th style="width:120px;">Equipment Number</th><th style="width:360px;">Notes</th><th style="width:157px;">Action</th>
		</tr>
<?php
	$conn = mysql_connect('xxxx','xxx','xxx') or die(mysql_error());
	$db = mysql_select_db('xxx',$conn) or die(mysql_error());
	$sql = "SELECT * FROM invoices WHERE on_hold='1' ORDER BY create_date";
	$result = mysql_query($sql,$conn);
	$class1 = "blue";
	$class2 = "white";
	$isfirst = 1;
		while($row = mysql_fetch_assoc($result))
		{
			$id = $row['id'];
			$invoice_num = $row['invoice_num'];
			$equip_num = $row['equip_num'];
			$notes = $row['notes'];
			$row_class = ($row_count % 2) ? $class1 : $class2;
			echo"<tr><td class='$row_class'>$invoice_num</td><td class='$row_class'>$equip_num</td><td class='$row_class'>$notes</td><td class='$row_class' style='text-align:center;'><div id='basic-modal' style='float:left; margin-right:0px;'><form name='myForm'><input type='hidden' id='invoice_num' value='$invoice_num' /><input type='image' src='/invoices/images/view.png' onclick='ajaxFunction(this)' value='view' class='basic'/></form></div><a href=\"/invoices/edit/?id=".$id."&invoice_num=".$invoice_num."&equip_num=".$equip_num."\"><img src='/invoices/images/edit.png'</a> <a href=\"/invoices/scripts/clear.php?id=".$id."&invoice_num=".$invoice_num."&equip_num=".$equip_num."\"><img src='/invoices/images/clear.png'></a> <a href=\"/invoices/scripts/tickler.php?id=".$id."&invoice_num=".$invoice_num."&equip_num=".$equip_num."\"><image src='/invoices/images/tickler.png'></a></td></tr>";
			$row_count++;
		}
?>
</table>
<!--End New Invoices-->
<!--Ticklers-->
<div style="text-align:left;"><h1 style="margin-bottom:3px; margin-right:20px;">Ticklers</h1></div>
	<table align="center" id="printview" class="qresults">
		<tr style="background-color:#3366cc; color:white;">
			<th style="width:120px;">Invoice Number</th><th style="width:120px;">Equipment Number</th><th style="width:360px;">Notes</th><th style="width:157px;">Action</th>
		</tr>
<?php
	$sql = "SELECT * FROM invoices WHERE tickler='1' ORDER BY create_date";
	$result = mysql_query($sql,$conn);
	$class1 = "blue";
	$class2 = "white";
	$isfirst = 1;
		while($row = mysql_fetch_assoc($result))
		{
			$id = $row['id'];
			$invoice_num = $row['invoice_num'];
			$equip_num = $row['equip_num'];
			$notes = $row['notes'];
			$row_class = ($row_count % 2) ? $class1 : $class2;
				echo"<tr><td class='$row_class'>$invoice_num</td><td class='$row_class'>$equip_num</td><td class='$row_class'>$notes</td><td class='$row_class' style='text-align:center;'><div id='basic-modal' style='float:left; margin-left:25px; margin-right:-20px;'><form name='myForm'><input type='hidden' id='invoice_num' value='$invoice_num' /><input type='image' src='/invoices/images/view.png' onclick='ajaxFunction(this)' value='view' class='basic'/></form></div><a href=\"/invoices/edit/?id=".$id."&invoice_num=".$invoice_num."&equip_num=".$equip_num."\"><img src='/invoices/images/edit.png'</a> <a href=\"/invoices/clear/?id=".$id."&invoice_num=".$invoice_num."&equip_num=".$equip_num."\"><img src='/invoices/images/clear.png'></a></td></tr>";
				$row_count++;
		}
?>
</table>
</div><!--End Wrapper-->
<!--End Ticklers-->

I know there is a JQuery UI drag and drop plugin, but I guess I just don't know where to start. Any help is much appreciated!