✔ Div verschieben (Pos. ändern) und neue Position in MySQL speichern

Kalma

Kalma

Erfahrenes Mitglied
Hi,


ich habe ein Problem mit dem neuen Anordnen von "Widgets".

Ich hole die Widgets aus einer Datenbank, und in der Tabelle ist ebenfalls die Position gespeichert, an der der Benutzer das Widget haben möchte:


widget_id
widget_user_id
widget_order


Soo..
Desto höher die widget_order zahl, desto weiter oben steht das.


Jetzt will ich, dass der Benutzer das Widget einfach anpacken kann und nach oben/unten verschieben kann und die Position in der Tabelle gleichzeitig und ohne reload geändert wird.

Wie ist das am Besten möglich?
Kennt ihr gute Tutorials für sowas?
habe viel gegooglet, aber nichts wirklich passendes gefunden!



Vielen Dank im Vorraus
David
 
Hi,

mit jQuery kannst du über das UI Elemente sortierbar machen. Damit könntest du die "Widget"-Elemente innerhalb einer Tabellenzelle sortieren. Nachdem das Element wieder frei ist, kannst du dessen Index innerhalb der Zelle bestimmen.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.sortable.js"></script>
<script type="text/javascript">
  <!--
$(function(){
  $("#sortable td").sortable({
    stop: function(evt, ui){
      alert($("#sortable td div").index(ui.item));
    }
  }).disableSelection();
});
 //-->
</script>
</head>
<body>
<table id="sortable" width="200" height="80" border="1">
  <tr>
    <td>
      <div>widget_1</div>
      <div>widget_2</div>
      <div>widget_3</div>
    </td>
  </tr>
</table>
</body>
</html>

Ciao
Quaese
 
Oh, Missverständnis.

Ich meinte eigentlich dass die Datenbanktabelle mit der neuen Position (int) geupdatet wird.
 
Hi,

du kannst statt der Ausgabe des neuen Index einen Ajax-Request auslösen, der auf der Serverseite die Datenbank updatet.

Unter der Voraussetzung, dass die Widget-Elemente mit einer ID ausgezeichnet sind, würde folgendes Beispiel funktionieren:
Code: 
$(function(){
  $("#sortable td").sortable({
    stop: function(evt, ui){
      $.ajax({
        type: 'post',
        url: 'xmlhttp_request_dummy.php',
        data: {
          index: $("#sortable td div").index(ui.item),
          id: ui.item.attr('id')
        },
        success: function(msg){
          alert("Eintrag erfolgreich: \n" + msg);
        }
      });
    }
  }).disableSelection();
});

Auf der Serverseite stehen dir die POST-Variablen index und id zur Weiterverabeitung zur Verfügung. Damit sollte das Updaten der Datenbank möglich sein.

Ciao
Quaese
 
Vielen Dank, werde ich gleich mal probieren.


In dem Beispiel ist ja eine Tabelle drumherum.
Das muss ich doch nicht haben oder?

// Edit:
Ups sorry, doch funktioniert schon.

Kann ich jetzt noch irgendwie automatisch aktualisieren lassen?

Oder besser noch, könnt ihr mir einen Denkanstoß geben, wie ich direkt die DIV's verschieben kann und nicht über die Tabelle?

Hi,


alsoo..
http://guerilla.ifloegel.de/

Dort habe ich jetzt oben die Tabelle, die die unten stehenden Widgets sortieren soll..


Ich habe folgende Funktion übernommen:
Code: 
// sort div new
$(function(){
  $("#sortable td").sortable({
    stop: function(evt, ui){
      $.ajax({
        type: 'post',
        url: 'testing.php',
        data: {
          index: $("#sortable td div").index(ui.item),
          id: ui.item.attr('id')
        },
        success: function(msg){
          alert("Eintrag erfolgreich: \n" + msg);
        }
      });
    }
  }).disableSelection();
});


und folgenden PHP Code
PHP: 
 $query = 'UPDATE widget_allocation SET `awidget_order` = "'.$_POST['index'].'" WHERE `awidget_id` = "'.$_POST['id'].'"';
 $result = mysql_query($query);
 
 echo $query;

erstellt.


HTML: 
<table id="sortable" width="200" height="80" border="1">
					  <tr>
						<td>
						  <div id="1">widget_1</div>
						  <div id="2">widget_2</div>
						  <div id="3">widget_3</div>
						</td>
					  </tr>
					</table>

Dies ist die Tabelle.

Was ich jetzt nicht verstehe.
Wenn ihr mal versucht einen Div zu verschieben, sagt er, es hat funktioniert, aber er ändert nichts in der Datenbank.


Wo liegt noch der Fehler, den ich nicht sehe?

Danke
David
 
Wenn ich das richtig sehe, lautet dein SQL-statement
SQL: 
Good Morning  UPDATE widget_allocation SET `awidget_order` = "2" WHERE `awidget_id` = "2"

Das "Good Morning " sollte aber nicht dazu gehören. Oder machst du in deiner testing.php noch ein weiteres echo?
 
Oh, ne, das gehört nicht dazu, tut aber nichts zur Sache.
Das gehört zu einem Anderen AJAX Test.

Wird einfach per Echo ausgegeben.

Hi,

könnt ihr mir sagen, woran es liegt, dass wenn man das erste Widget hinter das zweite zieht, die Position vom 2ten 6 ist?

Wenn ihr schiebt, kommt ein PopUp, dass die Positionen ausgibt.
x -> x
also verschieben von pos 1 nach pos 2
 
Hi,

das liegt daran, dass alle DIVs innerhalb der Tabellenzelle in die Kollektion (Array) augenommen werden und somit beim Zählen des Index mit eingehen.

Abhilfe schafft eventuell die zusätzliche Angabe der Klasse widget, wodurch die Kollektion auf die Widgets eingeschränkt wird:
Code: 
$("#sortable td div.widget").index(ui.item)

Wird die Datenbank jetzt korrekt upgedatet? Ich hab das hier mal in etwa nachgestellt und da funktioniert es tadellos.

Ciao
Quaese
 
Ah, jetzt sortiert er immerhin schonmal richtig.



Jetzt hätt ich noch 2 Anliegen.
Zum einen, dass man auch ohne dieses Tabellengerüst drumherum verschieben kann.


Und, das wenn man nur auf den Titel des Widgets klickt, man verschieben kann.


Das wäre super wenn ihr mir da noch Hilfestellung geben könntet :)
 
Hi,

du kannst doch angeben, in welchem Element die Unterelemente verschiebbar sein sollen - wenn es die Spalte mit der ID col1_content sein soll, gibt du diese als Selektor an (statt #sortable td - Tabelle nicht zu löschen vergessen).

Wenn du ein bestimmtes Element bestimmen möchtest, über das das Verschieben möglich ist, verwende die Option handle.

Mehr Infos findest du unter jquery.ui.sortable.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück