Position von Datensätzen per Drag and Drop ändern

In diese Beitrag zeige ich, wie man mit Ajax die Position von Datensätzen in einer MySQL-Datenbank per Drag & Drop ändern kann.

 

Aufbau der Datenbank

Für dieses Beispiel habe ich eine Datenbanktabelle angelegt in der die Vornamen, Nachnamen und Strassen von Kunden gespeichert werden sollen. Neben diesen Daten werden zusätzlich für jeden Kunden eine eindeutige ID und die Position gespeichert. Die ID wird durch die Datenbank selbst vergeben da es sich dabei um ein AutoIncrement Feld handelt. Die Position eines Eintrages können Sie später ganz leicht anpassen, indem Sie diesen in der Liste der Kundennamen einfach per Drag and Drop verschieben.

phpMyAdmin

Hier der Vollständigkeit halber noch die SQL-Query zum anlegen der Datenbanktabelle.

CREATE TABLE `Kunden` (
  `id` bigint(11) NOT NULL AUTO_INCREMENT,
  `pos` bigint(11) NOT NULL,
  `Vorname` varchar(50) NOT NULL,
  `Nachname` varchar(50) NOT NULL,
  `Wohnort` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

 

inc/db.inc.php

Die Datei “db.inc.php” im Verzeichnis “inc” sorgt für den Verbindungsaufbau zur Datenbank. Um diese nutzen zu können, müssen Sie als erstes die Angaben für Datenbankserver, Datenbankname, Datenbank Username und Datenbank Passwort in den Zeilen 4 bis 7 an Ihre Gegebenheiten anpassen.

<?php
if (__FILE__ == $_SERVER['SCRIPT_FILENAME']) exit('No direct access allowed.');

$DB_SERVER = "localhost";
$DB_NAME = "DATENBANKNAME";
$DB_USER = "DATENBANKUSERNAME";
$DB_PASSWORD = "DATENBANKPASSWORT";

$conn = mysql_connect($DB_SERVER, $DB_USER, $DB_PASSWORD);
if(is_resource($conn))
{
  mysql_select_db($DB_NAME, $conn);
  mysql_query("SET NAMES 'utf8'", $conn);
  mysql_query("SET CHARACTER SET 'utf8'", $conn);
}
?>

 

index.php

Die Datei “index.php” gibt eine einfache Liste aller Kunden, aus der zuvor erstellten Datenbank aus.
Die Funktion slideout gibt jedes mal, wenn Sie die Position eines Eintrages geändert haben, eine Erfolgsmeldung aus, an der Sie erkennen können, dass die neue Position in der Datenbank gespeichert wurde. Diese Nachricht wird nach 2 Sekunden automatisch nach oben ausgeblendet. Welche Meldung Sie hier ausgeben lassen bleibt Ihnen überlassen. Dies können Sie in der Datei “update.pos” in Zeile 20 selber anpassen.

Die nachfolgende Funktion wird aufgerufen sobald Sie einen Eintrag mit der linken Maustaste anklicken und diesen bei gedrückter linker Maustaste verschieben. Zuerst werden die Transparenz des zu verschiebenden Eintrages und der Mauszeiger geändert. Anschließend wird die Datei “UpdatePos.php” per POST aufgerufen.  Dabei wird eine Variable $action mit dem Wert “UpdateCustomerPos” mit übergeben. Anhand dieser Variablen könnten Sie z.B. die Positionen von Einträgen aus mehreren Datenbanktabellen ändern da diese in der Datei “UpdatePos.php” abgefragt wird.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9">
  <meta charset="utf-8">
  <meta name="author" content="Enrico Sadlowski">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="robots" content="index,follow">
  <title>Position per Drag and Drop ändern</title>
  <link rel="stylesheet" href="styles/default.css" type="text/css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>

  <script type="text/javascript">
    $(document).ready(function()
    {
      function slideout() {
        setTimeout(function() {
          $("#debugMess").slideUp("slow", function () {
      });
    }, 2000);}

    $("#debugMess").hide();

    $(function() {
        $("#customersList").sortable({ placeholder: "customersListHighlight", opacity: 0.5, cursor: 'move', update: function() {
          var order = $(this).sortable("serialize") + '&action=updateCustomerPos';
          $.post("UpdatePos.php", order, function(theResponse) {
            $("#debugMess").html(theResponse);
            $("#debugMess").slideDown('slow');
            slideout();
          }); 															 
        }								  
      });
      $( "#customersList" ).disableSelection();
    });
  });	
  </script>
</head>
<body>

<?php
require("inc/db.inc.php");
$showDebugMessage = true;

$q_data = mysql_query("SELECT id, CONCAT(Vorname,' ',Nachname) AS Kundenname, Wohnort FROM Kunden ORDER BY pos ASC");
if(mysql_num_rows($q_data) > 0)
{
  echo "<div id=\"wrapper\">\n";
  if($showDebugMessage) echo "  <div id=\"debugMess\"></div>\n";

  echo "  <ul id=\"customersList\">\n";
  while($r_data = mysql_fetch_object($q_data))
  {
    echo "    <li id=\"recArray_".$r_data->id."\">\n";
    echo "      <div class=\"customerName\">".$r_data->Kundenname."</div>\n";
    echo "      <div class=\"customerOrt\">".$r_data->Wohnort."</div>\n";
    echo "    </li>\n";
  }
  echo "  </ul>\n";

  echo "</div>";
}
else
{
  echo "Es wurde kein Kunde in der Datenbank gefunden";
}
?>

</body>
</html>

 

UpdatePos.php

Die Datei “UpdatePos.php”, die durch die Datei “index.php” aufgerufen wird sobald ein Eintrag verschoben wurde, durchläuft nun das, durch die index.php übergebene Array aller ids und speichert die neuen Positionen aller Einträge. Welche Werte durch die Datei “index.php” übergeben wurden, können Sie leicht herausfinden, indem Sie einfach den Text in Zeile 20 durch folgenden Code ersetzen. So wird die Benachrichtigung “Position gespeichert” durch das Array der übergebenen Werte ergänzt.

echo 'Position gespeichert';
echo '<pre>';
print_r($updRecArray);
echo '</pre>';

 

<?php
/****************************************************************************************
                                                                                        *
Wird aufgerufen wenn die Position eines Eintrages per Drag and Drop veraendert wird.	*
                                                                                        *
****************************************************************************************/
require("inc/db.inc.php");

$action = mysql_real_escape_string($_POST['action']); 
$updRecArray = $_POST['recArray'];

if($action == "updateCustomerPos")
{	
  $counter = 1;
  foreach ($updRecArray as $recordIDValue) 
  {
    $q_update = mysql_query("UPDATE Kunden SET pos = " . $counter . " WHERE id = " . $recordIDValue) or die(mysql_error());
    $counter++;	
  }
  echo 'Position gespeichert';
}
?>

 

styles/default.css

Diese Datei sorgt lediglich für ein frisches Aussehen der Kundenliste.

body 
{ 
  font-size : 12pt; 
  font-family : "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  padding : 0;
  margin: 0; 
} 

#wrapper
{
  margin: 0 auto 0 auto;
  width: 30%;
}

#customersList 
{ 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
}

#customersList li 
{
  height: 40px;
  padding: 10px;
  margin: 10px 0; 
  background-color:#efefef; 
  border: 1px solid silver; 
  color:#fff;
}

html>body #customersList li 
{
  height: 40px;
  margin: 10px 0;
}

#customersList .customersListHighlight 
{ 
  background: #fdfdfd; 
  height: 40px;
  border: 1px dashed silver;
}

.customerName 
{
  color: green;
  font-size: 15pt;
}

.customerOrt
{
  color: silver;
  font-weight: normal;
}

#debugMess
{
  background: green;
  color: white;
  padding: 10px;
  border: 1px solid silver;
}

 

Kundenliste Standard 

Kundenliste

Aufnehmen eines Eintrages und an die gewünschte Stelle verschieben

Kundenliste Eintrag verschieben

Den Eintrag an der gewünschten Stelle ablegen

Kundenliste Eintrag ablegen

Die neue Position wurde in der Datenbank gespeichert

Kundenliste Position gespeichert

Das komplette Projekt können Sie hier herunter laden.
Ich hoffe Ihnen hat dieser Beitrag gefallen.
Bei Fragen und Anregungen nutzen Sie bitte die Kommentarfunktion.

Über profwebapps

Programmierer, Webdesigner, Grafiker, Mac-User, Blogger, Screencaster. profwebapps ist auch bei Google+ vertreten

Kommentar verfassen