Hello, im making a bookmark script to save on a web page as links. I have the following code but i want to have links movable.
That is i want to able to change position on the links. Demo: Click Here

The code i use:

<?php
require("../config.php");
if ($enablegzip == "1")
{
ob_start("ob_gzhandler");
header("Content-Encoding: gzip");
}
session_start();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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 type="text/javascript" src="../collapse_expand_single_item.js"></script>
<script type="text/javascript" src="../jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>  
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
    <script>  
        $(function() {
            $( "#sortable" ).sortable({   
                placeholder: "ui-sortable-placeholder"   
            });  
        });  
    </script>  
</head>
<body>
<br>
<div class="link_back">
<a href="../index.php">Back to Index</a></div>
<br>
<div class="add_link">
<a href="#first" onClick="shoh('first');">Add new link +</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">
<div class="box_title">Title:</div><input type=text name=text size="56">
<div class="box_link">Drag & Drop Link:</div><input type=text value="" name=link size="56">
<div>
<br><br>
<input type=submit class="add_button" value="Add"></div>
</form>
<br>
</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. "\n"); 
           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
?>
<div class="wraper">
<a href="<?=$link?>" target="_self">
<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": "56px"
    });
});
</script>
<p class="title"><?php echo ("$title");?>
</p></a></div>
<?
}
//Pagination
if ($start>$show) {
      $start-=$show;
      $end-=$show;
      $start--;
      $end--;
      echo "<a href=index.php?start=$start&end=$end><div class=\"next\">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</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</a></div>";
      $start--;
      $end--;
}
?>
</body>
</html>
Member Avatar
diafol

Sorting by drag and drop will require javascript - not PHP. There are many libraries that provide an easy interface. In addition why don't you use a DB?
Far more flexible than a flat file. Writing and rewriting repeatedly can cause problems. Concurrency being an issue.

If you use a DB, you could allow your users (if you plan to have users) to have their own bookmarks and merge them with others (e.g. categories)

Hello, and thank you for aswering. I have tryed severol Java/Jquery Dragg/Drop/Sort scripts but i can't get them to work. I can only move the first link and i cant get even this one to change position.

Member Avatar
diafol

Ok, but the fact remains, you need js not php for drag and drop. If you have js issues, go to the javascript/dhmtl/ajax forum.

OK, i have jQuery Drop/Sort working. Now i need a save the new order function, i think that will be an PHP function. This is the code i have now:

<?php
require("../config.php");
if ($enablegzip == "1")
{
ob_start("ob_gzhandler");
header("Content-Encoding: gzip");
}
session_start();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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 type="text/javascript" src="../collapse_expand_single_item.js"></script>
<script type="text/javascript" src="../jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>  
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
</head>
<body>
<br>
<div class="link_back">
<a href="../index.php">Back to Index</a></div>
<br>
<div class="add_link">
<a href="#first" onClick="shoh('first');">Add new link +</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">
<div class="box_title">Title:</div><input type=text name=text size="56">
<div class="box_link">Drag & Drop Link:</div><input type=text value="" name=link size="56">
<div>
<br><br>
<input type=submit class="add_button" value="Add"></div>
</form>
<br>
</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. "\n"); 
           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
?>
<div id="sortable">
<div class="wraper">
<a href="<?=$link?>" target="_self">
<p class="title"><?php echo ("$title");?>
</p></a></div>
<?
}
{
      $start+=$show;
      $end+=$show;
      $start++;
      $end++;
      "<a href=index.php?start=$start&end=$end><div class=\"next\">Next</a></div>";
      $start--;
      $end--;
}

?>
</div>
<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": "56px"
    });
});
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
</script>
</body>
</html>

Thank you.