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.
Da immer mehr auf mySQLi statt mySQL gesetzt wird, habe ich den Beitrag dahingehend am 22.06.2014 angepasst.

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";

$db = new mysqli($DB_SERVER, $DB_USER, $DB_PASSWORD, $DB_NAME);

if (mysqli_connect_errno()) 
{
 printf("Verbindung fehlgeschlagen: %s\n", mysqli_connect_error());
 exit();
}

mysqli_set_charset($db,"utf8");
?>

 

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 = $db->query("SELECT id, CONCAT(Vorname,' ',Nachname) AS Kundenname, Wohnort FROM Kunden ORDER BY pos ASC");
if(mysqli_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 = $q_data->fetch_object())
 {
 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";
}
$db->close();
?>

</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 = $db->real_escape_string($_POST['action']); 
$updRecArray = $_POST['recArray'];
 
if($action == "updateCustomerPos")
{ 
 $counter = 1;
 foreach ($updRecArray as $recordIDValue) 
 {
 $q_update = $db->query("UPDATE Kunden SET pos = " . $counter . " WHERE id = " . $recordIDValue);
 $counter++; 
 }
 echo 'Position gespeichert';
}

$db->Close();
?>

 

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 Enrico S.

Programmierer, Webdesigner, Grafiker, Blogger, Screencaster, Arduino- und eMobility Enthusiast. nefilim3006 ist auch bei Google+ vertreten

5 Kommentare zu “Position von Datensätzen per Drag and Drop ändern

  1. Funktioniert leider weder im IE11, noch im FF29.0.1, noch im Chrome35

  2. Solche Aussagen kann ich überhaupt nicht leiden.
    Es geht nicht. Was geht denn nicht?
    Ich habe das Ganze eben im Chrome35 getestet und da geht es perfekt. Das einzige das mal geändert werden müsste ist das umschreiben von mySQL auf mySQLi.

  3. Hallo, ich habe auch Probleme mit dem Script. Ich nutze Windows 8.1 und weder mit dem Internet Explorer im Desktop-Mode, noch im ModerUI-Mode lassen sich die Datensätze verschieben. Mit Chrome funktioniert alles einwandfrei. Gibt es eine Lösung, wie es im IE zum laufen zu kriegen ist?

  4. Ich habe es hinbekommen. Ich habe die neueste Version von jQuery und JQueryUI eingebunden und warum auch immer, damit funktioniert es auch mit dem IE bei mir.

  5. Danke für den Code, ich brauche so etwas für eine Art eigenes Projektmanagement und da hilft mir das hier bei der Umsetzung schon mal sehr viel weiter.
    War problemlos zu aktivieren und lief reibungslos im FF und Chrome.
    Im IE allerdings auch nicht (ebenfalls 11). Die Liste wird angezeigt, es lässt sich aber nicht klicken.
    Aber ich brauch das so oder so nur als Inspiration und bedanke mich daher für das Teilen des Codes.
    Grüße,
    Bella

Kommentar verfassen