Drag and Drop mit Datensätzen von der Datenbank

Sonjiru · 05.10.12, 11:17

Hi,

ich habe wiedereinmal ein Problem und zwar habe ich mich jetzt einmal mit einem Drag and Drop auseinander gesetzt es geht wiedereinmal um Fussball.

Folgendes Szenario ein User ist Manager vom FC Bayern München dann hat er in seinem Kader einen Mario Gomez (ST), Manuel Neuer (TW) und Javi Martinez (DMF). Diese möchte der User natürlich aufstellen und das möchte ich per Drag and Drop realisieren (sprich User klickt auf Martinez hält es gedrückt und zieht ihn auf die Position des Defensiven Mittelfeldspielers). Also habe ich gegooglet und bin auf JQuery gestoßen und habe mich da mal durchgelesen und erstmal nur an den demo dateien herumexperimentiert um zu sehen wie sich das ganze Verhält.(die allerdings ohne Daten aus der Datenbank arbeiten). So weit so gut das ganze hat funktioniert ich habe den Code verstanden. Also machte ich mich daran das ganze jetzt mit den Datensätzen zu erledigen. Sprich die SQL Befehle geschrieben und die Datensätze da ausgegeben wo es sein muss (bei der Draggable Eigenschaft). Nur jetzt lässt sich das ganze nicht mehr verschieben. Ich frage mich warum? Denn ich habe noch die vorgefertigte Demo Datei einfach umgeschrieben (Variablen ersetzt).

Liegt es daran das es eine .tpl datei ist? Denn wenn ich die gleiche Datei mit Endung HTML (im gleichen Ordner!) ausführe lässt es sich wieder verschieben. Jedoch ohne die Datensätze aus der Datenbank.

Hiereinmal der Code der TPL Datei :

Code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>LFM Aufstellungsdemo!</title>
	<link rel="stylesheet" href="jquery.ui.all.css">
	<s***** src="jquery-1.8.2.js"></s*****>
	<s***** src="jquery.ui.core.js"></s*****>
	<s***** src="jquery.ui.widget.js"></s*****>
	<s***** src="jquery.ui.mouse.js"></s*****>
	<s***** src="jquery.ui.draggable.js"></s*****>
	<s***** src="jquery.ui.droppable.js"></s*****>
	<s***** src="jquery.ui.sortable.js"></s*****>
	<s***** src="jquery.ui.accordion.js"></s*****>
	<link rel="stylesheet" href="demos.css">
	<style>
	h1 { padding: .2em; margin: 0; }
	#products { float:left; width: 500px; margin-right: 2em; }
	#cart { width: 200px; float: left; }
	/* style the list to maximize the droppable hitarea */
	#cart ol { margin: 0; padding: 1em 0 1em 3em; }
	</style>
	<s*****>
	$(function() {
		$( "#spieler" ).accordion();
		$( "#spieler li" ).draggable({
			appendTo: "body",
			helper: "clone"
		});
		$( "#aufstellung ol" ).droppable({
			activeClass: "ui-state-default",
			hoverClass: "ui-state-hover",
			accept: ":not(.ui-sortable-helper)",
			drop: function( event, ui ) {
				$( this ).find( ".placeholder" ).remove();
				$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
			}
		}).sortable({
			items: "li:not(.placeholder)",
			sort: function() {
				// gets added unintentionally by droppable interacting with sortable
				// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
				$( this ).removeClass( "ui-state-default" );
			}
		});
	});
	</s*****>
</head>
<body>
<div class="demo">	
<div id="products">
	<h1 class="ui-widget-header">Kader</h1>	
	<div id="spieler">
		<h3>Kader</a></h3>
		<!-- START bl_kader -->
    <div>
			<ul>
				<li>{id} {vorname} {nachname}</li>
			</ul>
		</div>
    <!-- END bl_kader -->
	</div>
</div>
<div id="aufstellung">
	<h1 class="ui-widget-header">Aufstellung</h1>
	<div class="ui-widget-content">
		<ol>
			<li class="placeholder">Spieler hier hin!</li>
		</ol>
	</div>
</div>

</div><!-- End demo -->
</body>
</html>

Hier der meiner PHP Datei

Code:

<?php

require("global.php");

$tpl_inhalt = new fxl_template("templates/aufstellung.tpl");
  
  session_start();
  
  $user_id = $_SESSION['id'];

  $sql = mysql_query("SELECT verein_id FROM user WHERE id = $user_id");
  $user = mysql_fetch_array($sql);
  mysql_free_result($sql);
  
  $verein_id = $user['verein_id'];
 
 $sql = mysql_query("SELECT * FROM spieler WHERE verein_id = $verein_id");
 while ($row = mysql_fetch_array($sql)) {

 $id = $row['id'];
 $vorname = $row['vorname'];
 $nachname = $row['nachname'];
 $nationalitaet = $row['nationalitaet'];
 $bildnationalitaet="<img src=\"grafiken/flaggen/".$nationalitaet.".gif\">";
 $position = $row['position'];
 $marktwert = $row['marktwert'];
 
  $block = $tpl_inhalt->getblock("bl_kader");
  $block -> assign(array(
  
  "id"=>$id,
  "vorname"=>$vorname,
  "nachname"=>$nachname
  ));
  
   $tpl_inhalt -> assign("bl_kader",$block);
   $block->clear(); 
   
 	
 } 
 
 require("ausgabe.php")
 

?>

Ich hoffe ihr konntet mir folgen und könnt mir helfen. Ich versuche das ganze natürlich weiterhin noch selber zu lösen. Hoffe dennoch das ihr mir Tipps gebt

Danke

Edit : Scheint an der TPL Datei zu liegen. Habe jetzt einmal HTML Code und PHP Code in eine Datei gepackt und siehe da es funktioniert (naja fast zumindest).

Code:

<?php  
require("global.php");

?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>LFM Aufstellungsdemo!</title>
	<link rel="stylesheet" href="templates/jquery.ui.all.css">
	<s***** src="templates/jquery-1.8.2.js"></s*****>
	<s***** src="templates/jquery.ui.core.js"></s*****>
	<s***** src="templates/jquery.ui.widget.js"></s*****>
	<s***** src="templates/jquery.ui.mouse.js"></s*****>
	<s***** src="templates/jquery.ui.draggable.js"></s*****>
	<s***** src="templates/jquery.ui.droppable.js"></s*****>
	<s***** src="templates/jquery.ui.sortable.js"></s*****>
	<s***** src="templates/jquery.ui.accordion.js"></s*****>
	<link rel="stylesheet" href="templates/demos.css">
	<style>
	h1 { padding: .2em; margin: 0; }
	#products { float:left; width: 500px; margin-right: 2em; }
	#cart { width: 200px; float: left; }
	/* style the list to maximize the droppable hitarea */
	#cart ol { margin: 0; padding: 1em 0 1em 3em; }
	</style>
	<s*****>
	$(function() {
		$( "#spieler" ).accordion();
		$( "#spieler li" ).draggable({
			appendTo: "body",
			helper: "clone"
		});
		$( "#cart ol" ).droppable({
			activeClass: "ui-state-default",
			hoverClass: "ui-state-hover",
			accept: ":not(.ui-sortable-helper)",
			drop: function( event, ui ) {
				$( this ).find( ".placeholder" ).remove();
				$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
			}
		}).sortable({
			items: "li:not(.placeholder)",
			sort: function() {
				// gets added unintentionally by droppable interacting with sortable
				// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
				$( this ).removeClass( "ui-state-default" );
			}
		});
	});
	</s*****>
</head>
<body>

<div class="demo">	
<div id="products">
	<h1 class="ui-widget-header">Products</h1>	
	<div id="spieler">
		<h3><a href="#">Kader</a></h3>
		<!-- START bl_kader -->
    <div>
			<ul>
				<li><?php
        
        $sql = mysql_query("SELECT * FROM spieler WHERE verein_id = 1");
 while ($row = mysql_fetch_array($sql)) {

 $id = $row['id'];
 $vorname = $row['vorname'];
 $nachname = $row['nachname'];
 $nationalitaet = $row['nationalitaet'];
 $bildnationalitaet="<img src=\"grafiken/flaggen/".$nationalitaet.".gif\">";
 $position = $row['position'];
 $marktwert = $row['marktwert'];
 
 echo $id;
 echo $vorname;
 echo "$nachname <br />";
   
 	
 } 
        
        
        ?></li>
			</ul>
		</div>
    <!-- END bl_kader -->
	</div>
</div>

<div id="cart">
	<h1 class="ui-widget-header">Aufstellung</h1>
	<div class="ui-widget-content">
		<ol>
			<li class="placeholder">Spieler hier hin!</li>
		</ol>
	</div>
</div>

</div><!-- End demo -->
</body>
</html>

Das Problem jetzt ist das alle Spieler in einem <li>Element sind. Desweiteren kann man die Spieler nicht droppen.

Es muss aber doch eine Lösung geben das es mit dem Template System funktioniert.

kkhamburg · 06.10.12, 00:38

Hast du denn geprüft ob die Javas*****e auch gefunden werden wenn du sie aus dem template herraus aufrufst ?

Sonjiru · 06.10.12, 11:59

Zitat:

Zitat von kkhamburg

Hast du denn geprüft ob die Javas*****e auch gefunden werden wenn du sie aus dem template herraus aufrufst ?

Ich ginge davon aus da die JavaS***** Dateien im Ordner des Templates waren. Habe jedoch mal schnell Firebug angemacht und geschaut ob die Dateien gefunden werden. Wurden sie jedoch nicht. Jetzt habe ich sie korrekt verlinkt und ich kann die Spieler wunderbar nach rechts ziehen.

Nun bleiben also noch folgende Fragen :

Wie bekomme ich es hin das man nur 11 Spieler aufstellt (davon müssen mindestens 3 Verteidiger, 3 MF und 1 MS aufgestellt sein). Desweiteren wie speichert man das ganze in der Datenbank ab (ich nehme an per AJAX?) und wie gibt man die Spieler wieder an Ihren Positionen aus. Kann mir da jemand noch bitte helfen

kkhamburg · 06.10.12, 12:18

Javas***** hat keine Möglichkeiten in die Datenbank zu schreiben, die Infos müsstest du schon an PHP übergeben.

Auf 11 Spieler kommst du indem du ebenfalls mit PHP Sessions aktivierst und in der Datenbank speicherst. Dann kannst du wiederum die Anzahl gleichzeitiger Sessions begrenzen.

Sonjiru · 06.10.12, 16:36

Zitat:

Zitat von kkhamburg

Javas***** hat keine Möglichkeiten in die Datenbank zu schreiben, die Infos müsstest du schon an PHP übergeben.

Auf 11 Spieler kommst du indem du ebenfalls mit PHP Sessions aktivierst und in der Datenbank speicherst. Dann kannst du wiederum die Anzahl gleichzeitiger Sessions begrenzen.

Ja das ich mittels PHP oder AJAX reinspeichern muss dachte ich mir schon. Ok und wie geht das genau? Wie gesagt habe noch nie mit JS gearbeitet

kkhamburg · 06.10.12, 21:04

Setze dich bitte erstmal mit den Begrifflichkeiten auseinander.

AJAX ist Javas***** und dementsprechend ist ein direkter Zugriff auf eine Datenbank mit AJAX nicht möglich.

In wieweit hast du dich denn schon selber damit auseinandergesetzt ?
Beispiele wie man Daten von Javas***** an PHP übergibt gibt es nämlich massenweise im Netz und ohne konkret zu wissen unter welchen Bedingungen welche Daten in die Datenbank geschrieben werden sollen kann dir auch keiner helfen.

Für mich klingt deine Anfrage jedenfalls eher danach, das du dir bisher keine Mühe gegeben hast die benötigten Infos selber zusammen zu tragen.

Sonjiru · 06.10.12, 21:18

Das ein direkter Zugriff nicht möglich ist war mir klar. Jedoch meine ich mal gelesen zu haben das AJAX als Schnittstelle zwischen JS und PHP dient?

Naja doch ich will das ganze schon selber lösen sprich ich erwarte hier nicht das du oder ein anderer mir das S***** programmierst, wenn dann nur Denkanstöße geben bzw. beuurteilen ob meine Gedankengänge denn auch richtig sind und nachvollziehbar

.

Hab mir gerade auch folgendes "ausgedacht" bzw die Idee die ich hatte schnell in HTML Code gemacht sprich folgende :

Code:

<head>
	<title>LFM Aufstellungsdemo!</title>
	<link rel="stylesheet" href="templates/jquery.ui.all.css">
	<s***** src="templates/jquery-1.8.2.js"></s*****>
	<s***** src="templates/jquery.ui.core.js"></s*****>
	<s***** src="templates/jquery.ui.widget.js"></s*****>
	<s***** src="templates/jquery.ui.mouse.js"></s*****>
	<s***** src="templates/jquery.ui.draggable.js"></s*****>
	<s***** src="templates/jquery.ui.droppable.js"></s*****>
	<s***** src="templates/jquery.ui.sortable.js"></s*****>
	<s***** src="templates/jquery.ui.accordion.js"></s*****>
	<link rel="stylesheet" href="templates/demos.css">
	<style>
	h1 { padding: .2em; margin: 0; }
	#products { float:left; width: 500px; margin-right: 2em; }
	#cart { width: 200px; float: left; }
	/* style the list to maximize the droppable hitarea */
	#cart ol { margin: 0; padding: 1em 0 1em 3em; }
	</style>
	<s*****>
	$(function() {
		$( "#spieler" ).accordion();
		$( "#spieler li" ).draggable({
			appendTo: "body",
			helper: "clone"
		});
		$( "#aufstellung ol" ).droppable({
			activeClass: "ui-state-default",
			hoverClass: "ui-state-hover",
			accept: ":not(.ui-sortable-helper)",
			drop: function( event, ui ) {
				$( this ).find( ".placeholder" ).remove();
				$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
			}
		}).sortable({
			items: "li:not(.placeholder)",
			sort: function() {
				// gets added unintentionally by droppable interacting with sortable
				// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
				$( this ).removeClass( "ui-state-default" );
			}
		});
	});
	</s*****>
</head>
<body>
<div class="demo">	
<div id="products">
	<h1 class="ui-widget-header">Kader</h1>	
	<div id="spieler">
		<h3>Kader</a></h3>
		<!-- START bl_kader -->
    <div>
			<ul>
				<li>Spieler 1</li>
        <li>Spieler 2</li>
        <li>Spieler 3</li>
        <li>Spieler 4</li>
        <li>Spieler 5</li>
        
			</ul>
		</div>
    <!-- END bl_kader -->
	</div>
</div>
<div id="aufstellung">
	<h1 class="ui-widget-header">Aufstellung</h1>
  <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <div id="ms" class="ui-widget-content">
                <tr>
                  <td align="center"><ol><li class="placeholder">MS</li></ol>
                  </td>
                </tr>
                </div>
         </table>
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
               <td align="left"><ol><li class="placeholder">LA</li></ol>
                </td>        
               <td align="center"><ol><li class="placeholder">HS</li></ol>
               </td>
                 <td align="center"><ol><li class="placeholder">RA</li></ol>
                </td>
            </tr>
        </table>
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
                 <td align="center"><ol><li class="placeholder">OMF</li></ol>
                  </td>
            </tr>
        </table>
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>           
              <td align="left"><ol><li class="placeholder">LMF</li></ol>
              </td>
             <td align="center"><ol><li class="placeholder">ZMF</li></ol>
              </td>
              <td align="center"><ol><li class="placeholder">RMF</li></ol>
              </td>          
            </tr>
        </table>
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
             <td align="center"><ol><li class="placeholder">DMF</li></ol>
             </td>
            </tr>
        </table>  
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
             <td align="left"><ol><li class="placeholder">LV</li></ol>
             </td>
             <td align="center"><ol><li class="placeholder">IV</li></ol>
             </td>
             <td align="right"><ol><li class="placeholder">RV</li></ol>
             </td>
            </tr>
              </td>
        </table>
             <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                  <td align="center"><ol><li class="placeholder">TW</li></ol>
                  </td>
                </tr>
              </table>
</div>
</div>
</body>

Damit habe ich auf dem Spielfeld die Positionen verteilt und kann die Spieler hineinziehen. Jedoch noch nicht speichern da muss ich das ganze ja noch zu einem Formular machen (oder brauch ich das bei JS gar nicht?). Kann man das ganze eventuell sogar per DropID's speichern :

Code:

<div id="ms" class="ui-widget-content">
                <tr>
                  <td align="center"><ol><li class="placeholder">MS</li></ol>
                  </td>
                </tr>
                </div>

Oder bin ich völlig falsch?

Ich muss ja eine Verbindung herstellen zwischen den "gedroppten" Feld (ID) und eben dem Spieler (Spieler_ID).

kkhamburg · 06.10.12, 21:41

Das liegt ganz an dir.

Du bist ja der Herr über das was du tust.

Ob du nun direkte Koordinaten in der Datenbank speicherst oder eine Feld-ID, du musst nur deinem Javas***** mitteilen was es mit den Daten aus der Datenbank anfangen muss.

Zur Übermittlung der Daten schau mal hier :

[ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

Sonjiru · 06.10.12, 21:52

Zitat:

Zitat von kkhamburg

Das liegt ganz an dir.

Du bist ja der Herr über das was du tust.

Ob du nun direkte Koordinaten in der Datenbank speicherst oder eine Feld-ID, du musst nur deinem Javas***** mitteilen was es mit den Daten aus der Datenbank anfangen muss.

Zur Übermittlung der Daten schau mal hier :

[ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

Ja das stimmt natürlich.

Also ich habe gelesen das es per Feld ID besser zu speichern ist als mit den Koordinaten.

Auf gut deutsch ich lege in der Datenbank bei der Spielertabelle ein neues Feld an in dem ich dann die FELD ID speichere.diese muss ich dann in JS abfragen. Richtig?

Danke

kkhamburg · 06.10.12, 21:59

So kann das funktionieren.

An irgendeiner Stelle musst du dich aber damit auseinandersetzen welche Feld-ID letzlich welche Position beschreibt.

Das kann zum Beispiel durch banales durchnummerieren von DIVs erfolgen.

Sonjiru · 06.10.12, 22:09

Naja ich denke mal ich nenne die Feld_ID wie die Positionen sind.

Bzw da ich auch mal drei IV Felder habe sieht das ganze dann so aus

Iv_1, iv_2

Usw

Ist das verstanden worden?

kkhamburg · 06.10.12, 22:21

Ich muss das nicht verstehen.

Wichtig ist das du es verstehst und richtig umsetzt.

Egal wie auch immer du die Felder bezeichnest, irgendwann muss eine Position daraus werden.
Ob du diese Position nun direkt per Koordinaten ansprichts oder aber per Feldbezeichner über AJAX ist letzendlich davon abhängig, wie der Spielfluss funktionieren soll.

Wenn du über Feldbezeichner arbeitest wird es aber je nach Programmierung ein relativ grobes Raster ergeben

Sonjiru · 06.10.12, 23:00

Zitat:

Zitat von kkhamburg

Ich muss das nicht verstehen.

Wichtig ist das du es verstehst und richtig umsetzt.

Egal wie auch immer du die Felder bezeichnest, irgendwann muss eine Position daraus werden.
Ob du diese Position nun direkt per Koordinaten ansprichts oder aber per Feldbezeichner über AJAX ist letzendlich davon abhängig, wie der Spielfluss funktionieren soll.

Wenn du über Feldbezeichner arbeitest wird es aber je nach Programmierung ein relativ grobes Raster ergeben

Ja das stimmt auch wieder, ich habe meine Idee verstanden (ist besser wenn man vorher sich nen kleines Konzept schreibt und dann programmiert).

Naja ich werde mit Feldbezeichner arbeiten zumindest vorerst. In einer verbesserten Version kann man ja dann mit den Koordinaten arbeiten. Was meinst du denn mit einem groben Raster? Schlechter Programmierstil?

kkhamburg · 06.10.12, 23:13

Das Raster das sich ergibt ist abhängig von der Anzahl Positionen die du hast. Je mehr Positionen ansprechbar sind, umso feiner ist das Raster.

Stell dir einfach ein kariertes Blatt vor. Je mehr Kästchen auf einer Fläche sind, desto mehr kann man füllen ;-)

Sonjiru · 06.10.12, 23:23

Achso okay alles klar, danke

Wie gesagt ich werde erst später weiterprogrammieren jetzt ist es doch ein bisschen spät und ich kann mich nicht richtig konzentrieren. Aber danke schon einmal du hast mir schonmal sehr geholfen und ich denke mit dem jetzigen wissen kann ich das ganze auch Schritt für Schritt weiterprogrammieren.