How to implement a jQuery script to move links

JavaScript
1

Hello, i have the following script that i use to save web links. The way it works is like this: I have a first page containg an index A-Ö and when you click a index letter you are directed to the links page of this letter. In this page you can click Add link to add a new link and a Title for the link, The links are then shown on the same page. What i need is a script so that i can move and change position on the links. Check out the Web links - Index page here: [URL=“http://test3.fcab.se/links/index.php”] and click eg, on C it is on this page i have added the most links (not only links beginning with C, bot it’s easier to see the funkction of the script on this page).

This is the code i use:


<?php
require("../config.php");
if ($enablegzip == "1")
{
ob_start("ob_gzhandler");
header("Content-Encoding: gzip");
}
session_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi">
<title>Web links - List (<?php echo basename(dirname(__FILE__));?>)</title>
<LINK REL=StyleSheet HREF="../style.css" TYPE="text/css">
<script language="JavaScript" src="../collapse_expand_single_item.js"></script>
<script language="JavaScript" src="../jquery-1.11.1.js"></script>
</head>
<body topmargin="0" leftmargin="0">
<br>
<div class="link_back"><a href="../index.php"><< Back to Directory</a></div>
<br>
<div a href="#first" onClick="shoh('first');" class="add_link">Add new link <b>+</b></a></div>
<br>
<div class="index_letter"><?php echo basename(dirname(__FILE__));?></div>
<div class="add_links" style="display: none;" id="first">
<div class="box">
<br>
<FORM action=addurl.php METHOD=POST NAME="addurlform">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr><td width="100"><div class="box_title">Title:</td></div><td width="600"><INPUT TYPE=TEXT name=text size="56"></td></tr>
<tr><td width="300"><div class="box_link">Drag & Drop Link:</td></div><td width="600"><INPUT TYPE=TEXT value="" name=link size="56"></td></tr>
<tr><td width="100">&nbsp;</td><td width="500"><br><INPUT TYPE=SUBMIT id="add_button" value="Add"></td></tr>
</table>
</form>
</div>
</div>
</div>
<br>
<?
$gbfile='links.txt';
$separator= '|';
//====================================
//This function will add one line to
//the end of file
//====================================
function add($str){
global $gbfile;
      $tmp = trim($str);
      $fp=fopen($gbfile,'a+');
           flock($fp, LOCK_EX);
                fwrite($fp, $tmp. "\
");
           flock($fp, LOCK_UN);
      fclose($fp);
}

//====================================
//Function below gets specified number
//of lines and returns an array
//====================================
function get($start, $end){
global $gbfile;
      $records=array();
      $filename="links.txt";
	  $fp=fopen($gbfile,'r');
           flock($fp, LOCK_SH);
           $i=1;
           $tmp=TRUE;
           while($i<$start && !feof($fp)) {
                $tmp=fgets($fp);
                $i++;
           }
           while($i<=$end && !feof($fp)) {
                $tmp=trim(fgets($fp));
                if ($tmp) { array_push($records, $tmp); }
                $i++;
           }

           flock($fp, LOCK_UN);
      fclose($fp);
      return($records);
}
//Listing part

$start=$_GET['start'];
$end=$_GET['end'];

if (!$end || $start<=0) { $start=1; }
if (!$end) { $end=$linkspage; }
if ($end<$start) { $end=$start+1; }
$show=$end - $start;

//Get records from file into array
      $records = get($start, $end);
	   sort($records);

//For each record get each field
      foreach ($records as $rec) {
           $tmp = explode($separator, $rec);
$title = $tmp[0];
$link = $tmp[1];
//=================================
//Outputting
?>
<table id="table-1" border="0" cellpadding="0" cellspacing="" align="left" width="240" height="0">
<tr>
<td>
<a href="<?=$link?>" target="">
<script>
$("a[href^='http']").each(function() {
    $(this).css({
		background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat",
		"-webkit-background-size": "20px",
		"-moz-background-size": "20px",
		"-o-background-size": "20px",
		"background-size": "20px",
		"padding-left": "20px",
		"margin-left": "10px"
	});
});
</script>
<li class="title"><?php echo("$title");?>
</tr></td>
<table border="0" cellpadding="0" cellspacing="0" align="right" width="240" height="0">
</li></table></a>
<?
}
//Pagination
if ($start>$show) {
      $start-=$show;
      $end-=$show;
      $start--;
      $end--;
      echo "<a href=index.php?start=$start&end=$end><div class=\\"next\\"><<&nbsp;Previous</a></div>";
      if (count($records)!=0) {
      $start+=$show*2;
      $end+=$show*2;
      $start=$start+2;
      $end=$end+2;
	  echo "<a href=index.php?start=$start&end=$end><div class=\\"next\\">Next&nbsp;>></a></div>";
      $start--;
      $end--;
}
else {
      echo "<h3>No more records found!</h3>";
}
}
else {
      $start+=$show;
      $end+=$show;
      $start++;
      $end++;
	  "<a href=index.php?start=$start&end=$end><div class=\\"next\\">Next&nbsp;>></a></div>";
	  $start--;
      $end--;
}
?>
</body>
</html>

Thank you.