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.
Drag and Drop mit Datensätzen von der Datenbank
Baum-Darstellung