0

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>
2
Contributors
4
Replies
26
Views
3 Years
Discussion Span
Last Post by PatrikIden
0

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)

0

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.

0

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.