Willkommen |
|
|
|
myGully |
|
|
Links |
|
|
|
Forum |
|
|
|
|
 |
05.10.12, 11:17
|
#1
|
|
Anfänger
Registriert seit: Nov 2010
Beiträge: 11
Bedankt: 0
|
Drag and Drop mit Datensätzen von der Datenbank
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.
|
|
|
|
06.10.12, 00:38
|
#2
|
|
Profi
Registriert seit: May 2009
Ort: riding the roos
Beiträge: 1.466
Bedankt: 1.057
|
Hast du denn geprüft ob die Javas*****e auch gefunden werden wenn du sie aus dem template herraus aufrufst ?
|
|
|
|
|
06.10.12, 11:59
|
#3
|
|
Anfänger
Registriert seit: Nov 2010
Beiträge: 11
Bedankt: 0
|
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
|
|
|
|
|
06.10.12, 12:18
|
#4
|
|
Profi
Registriert seit: May 2009
Ort: riding the roos
Beiträge: 1.466
Bedankt: 1.057
|
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.
|
|
|
|
|
06.10.12, 16:36
|
#5
|
|
Anfänger
Registriert seit: Nov 2010
Beiträge: 11
Bedankt: 0
|
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 
|
|
|
|
|
06.10.12, 21:04
|
#6
|
|
Profi
Registriert seit: May 2009
Ort: riding the roos
Beiträge: 1.466
Bedankt: 1.057
|
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.
|
|
|
|
|
06.10.12, 21:18
|
#7
|
|
Anfänger
Registriert seit: Nov 2010
Beiträge: 11
Bedankt: 0
|
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).
|
|
|
|
|
06.10.12, 21:41
|
#8
|
|
Profi
Registriert seit: May 2009
Ort: riding the roos
Beiträge: 1.466
Bedankt: 1.057
|
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 ]
|
|
|
|
|
06.10.12, 21:52
|
#9
|
|
Anfänger
Registriert seit: Nov 2010
Beiträge: 11
Bedankt: 0
|
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
|
|
|
|
|
06.10.12, 21:59
|
#10
|
|
Profi
Registriert seit: May 2009
Ort: riding the roos
Beiträge: 1.466
Bedankt: 1.057
|
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.
|
|
|
|
|
06.10.12, 22:09
|
#11
|
|
Anfänger
Registriert seit: Nov 2010
Beiträge: 11
Bedankt: 0
|
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?
|
|
|
|
|
06.10.12, 22:21
|
#12
|
|
Profi
Registriert seit: May 2009
Ort: riding the roos
Beiträge: 1.466
Bedankt: 1.057
|
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
|
|
|
|
|
06.10.12, 23:00
|
#13
|
|
Anfänger
Registriert seit: Nov 2010
Beiträge: 11
Bedankt: 0
|
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?
|
|
|
|
|
06.10.12, 23:13
|
#14
|
|
Profi
Registriert seit: May 2009
Ort: riding the roos
Beiträge: 1.466
Bedankt: 1.057
|
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 ;-)
|
|
|
|
|
06.10.12, 23:23
|
#15
|
|
Anfänger
Registriert seit: Nov 2010
Beiträge: 11
Bedankt: 0
|
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.
|
|
|
|
Forumregeln
|
Du kannst keine neue Themen eröffnen
Du kannst keine Antworten verfassen
Du kannst keine Anhänge posten
Du kannst nicht deine Beiträge editieren
HTML-Code ist Aus.
|
|
|
Alle Zeitangaben in WEZ +1. Es ist jetzt 11:20 Uhr.
().
|
Linear-Darstellung
