Drag und Drop Dynamisch zufügen und Position bestimmen

B

Bicko

Erfahrenes Mitglied
Hi,

Ich probiere mich gerade an jQuery aus und bin nun auf die Drag and Drop Function gestossen. Als Übung versuche ich nun folgendes umzusetzen...

Ich bekomme aus der DB eine Reihe von Namen (Spielern) angezeigt, wenn ich nun einen Namen anklicke, wird dieser in den Spielerbereich verschoben und gleichzeitig wird eine Drag Function zugewiesen.

Sobald die max. Anzahl der Spieler erreicht wird, erscheinen die nächsten ausgewählten Spieler im "Auswechsel Spieler" Bereich.

Das klappt auch schon so weit. Doch nun möchte ich natürlich einen Auswechsel Spieler einwechseln können. Dafür möchte ich den Spieler hinter den Namen eines anderen Spieler ziehen dann sollte eine kleine Box erscheinen, wo ich noch die Zeit eintragen kann (input field) wenn alles fertig ist, speicher ich das Formular ab und die Informationen sollen zurück in die Datenbank.

Wie setze ich das nun am ehsten um? Meine Spieler sind momentan Listen Element, sollte ich das lieber als Tabelle machen? Sprich wenn ich auf einen Spieler klicke wird eine td erstellt, dort kommt der Spieler rein, danach eine weitere td die mit draggable versehen wird? Ich muss am Ende ja auch wissen, wo der Auswechselspieler abgelegt wurde, es muss also eine Verbindung zum Spieler geben.

Hat jemand eine Idee oder einen Ansatz wie man das am Besten umsetzen kann oder ist das am Ende gar nicht möglich?

Freue mich über jedes Feedback. Gruss Bicko
 
Moin,

eigentlich hast du ja alles selbst beschrieben, und generell geht soetwas.

Ich würde da allerdings gleich eine sortable List Nutzen, das versorgt dich mit allem Handwerkzeug, was du für die Umsetzung benötigst.

Schau dir sortable doch einfach mal an, und Frage, wenn du dort bei einem Detail nicht weiterkommst :)

http://docs.jquery.com/UI/Sortable
 
Moin,

Vielen Dank. Macht es denn Sinn eine Tabelle aufzubauen? Ich moechte ja den Spieler und den eingewechselten Spieler nebeneinander haben, da wuerde wohl am leichtesten mit einer Tabelle gehen. Soll dann <li> komplett weg?

Mit der sortable Function muss ich wirklich mal schauen, denn ich will ja eigentlich keine Spieler an sich sortieren, sondern am Ende nur wissen:
1. Wer hat von Anfang an gespielt
2. Wer wurde fuer wen, wann eingewechselt

Passt da wirklich sortable? Ich habe den Nutzen davon sicherlich noch nicht voll erfasst, aber ich bin wirklich verunsichert ob das ueberhaupt dafuer geht.
 
Hi,
Ich habe das Ganze jetzt doch ohne Tabelle gestaltet, stattdessen verwende ich jetzt Sortable + Portlet.

Eigentlich geht das schon soweit, nur habe ich jetzt ein Problem. Ich habe also meine Spieler und meine Ersatzspieler. Nehme ich nun einen Ersatzspieler, dann wird der in der 2. Spalte oben eingefuegt. Das geht natuerlich nicht, ich muss ja selber festlegen koennen, wo der erscheinen soll. Bisher habe ich noch keine Moeglichkeit gefunden das zu umgehen.

Hier erstmal mein Code den ich verwende um nach dem Click auf einen Spieler diesen in die Liste einzufuegen. Die ersten 11 werden also in ein sort1 div eingefuegt, die naechsten in sort2 div.
Code: 
var inputElemente1 = $('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"><div class="portlet-header ui-widget-header ui-corner-all">'+name+'</div><div class="portlet-content"></div></div>');

$("#sort1").append(inputElemente1);
$("#sort2").append(inputElemente2);

$(function() {
	$(".column").sortable({
	connectWith: '.column'
});

Das ist vermutlich nicht besonders schoen geloest, mit den Klassen direkt reingeschrieben, aber ich bin schon froh das es ueberhaupt soweit funktioniert.

Doch wie bekomme ich es jetzt hin, dass ich die Position auswaehlen kann und es nicht einfach bei 1 anfaengt?
 
Ich verwende kein Plugin. Ich habe das Beispiel auf der jQuery UI Seite (Portlet) in meinen Source Code uebernommen und etwas angepasst, mehr nicht.
 
Ahso, dachte du hättest da was spezielles genommen, dieses "Portlet" ist ja für sich nur ein Anwendungsfall von sortable.

Das sollte gehen, wenn du die Sache von Spalten auf Reihen umstellst, also für jeden Spieler ein Div.
Mit diesen div's müsstest du die Reservistenliste connecten.

Mal sehen, das hört sich recht interessant an, vielleicht probier ich das mal aus, wie man es en Detail anstellen kann :)
 
Oh je, ich glaube ich habe mich da wirklich festgebissen. Was ich immer noch nicht verstehe ist warum "sortable" und nicht "drag und drop". Sortable klingt fuer mich wirklich nach Reihenfolge sortieren, doch es ist es ja keine Liste die einfach sortiert werden soll. Im Prinzip ist es ja

Spieler 1
Spieler 2 (Auswechsel Spieler 2, 30.min)
Spieler 3
Spieler 4
Spieler 5 (Auswechsel Spieler 1, 10.min)

Also mein HTML sieht nun so aus:

HTML: 
<div id="spieler" class="groupWrapper column ui-sortable">

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">Spieler1</div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">Spieler2</div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">Spieler3</div>
    </div>
</div>


<div id="reservist" class="groupWrapper column ui-sortable">

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">R Spieler1</div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">R Spieler2</div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">R Spieler3</div>
    </div>
</div>

Es kann also auch sein, dass R Spieler 3 gar nicht eingesetzt wird, obwohl das macht es nochmal komplizierter und vielleicht sollte ich wirklich nur die in der Reservisten Liste habe, die dann auch zum Einsatz gekommen sind, aber wie gesagt, das bekomme ich auch schon nicht hin. Geht das wirklich mit sortable?
 
Da koenntest Du Recht haben, nur ist es fuer mich immer noch nicht ersichtlich ob es wirklich funktionieren kann. Wenn ich mir nun oben meine beiden div container ansehe, wuerde ich sagen das ich noch einen weiteren div container brauche, bzw ich wuerde eigentlich versuchen das folgende zu erreichen:
HTML: 
<div id="spieler" class="groupWrapper column ui-sortable">

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">Spieler1</div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header ui-widget-header ui-corner-all">Spieler2</div>
        <div class="reservist">R Spieler2</div>
    </div>

Ist dieser Gedankengang richtig und wenn ja, muss bzw. kann ich dann ueberhaupt Sortable nehmen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück