Gerald: Tip/Vorschlag gesucht

Hallo,

Beim Erstellen eines Dokumentes nutze ich eine HTML-Tabelle. Das ist auch sinnvoll, weil es tabelarisch aufgeführte Daten sind, deren Urspung eine DB ist.

Die Reihenfolge ist fix. Bisher. Ich habe mir gestern mal dieses Script ( http://www.isocra.com/…/table-drag-and-drop-jquery-plugin/ ) herunter geladen.

Das Teil funktioniert ganz prächtig, aber:

Ich habe in meiner Tabelle nicht einzelne Zeilen, die ich verschieben will, sondern immer Doppelpacks als Zeilen.

Nun wüßte ich gerne, ob ich diese Zeilen quasi als Verbund verschieben kann?

Keine Ahnung, wie gut der Scriptsupport auf dieser Seite ist.

Deshalb suche ich auch schonmal nach einer Ersatzlösung, wie ich die Doppelpack-Zeilen ggf. in einer Zeile darstellen kann.

So ein Doppelpack sieht ungefähr so aus:

<tr>  
	<td></td>  
	<td></td>  
	<td></td>  
	<td></td>  
	<td></td>  
</tr>  
<tr>  
	<td colspan='2'></td>  
	<td colspan='3'></td>  
</tr>

Fällt Euch dazu ein Tip ein?

Gerald

  1. Fällt Euch dazu ein Tip ein?

    Mehrere tbody-Elemente?

    1. Fällt Euch dazu ein Tip ein?

      Mehrere tbody-Elemente?

      Nachtrag: in diesem Zusammehang ist/war das rules-Attribut interessant - aber die Formatierung wirst du ohnehin per CSS erledigen wollen :)

    2. Fällt Euch dazu ein Tip ein?

      Mehrere tbody-Elemente?

      Hi suit,

      soweit ich das verstanden habe, unterstützt das Script mehrere tbody-Elemente in der Art, dass man den Bereich, innerhalb dessen gedragt+gedroppt werden kann, durch tbodys begrenzen kann.

      Man kann also nicht über einen tbody hinaus draggen+droppen.

      Oder habe ich Deinen Vorschlag falsch interpretiert?

      Gerald

      1. Man kann also nicht über einen tbody hinaus draggen+droppen.

        Mit diesem Script nicht, nein

        Oder habe ich Deinen Vorschlag falsch interpretiert?

        In gewisser Weise - wenn du dein Sortierungsscript ersetzen kannst, ist die Sache schnell gelöst. jQuery-UI-Sortable wäre z.B. eine Lösung, da kannst du den Container und die sortierbaren Elemente recht frei bestimmen.

        1. In gewisser Weise - wenn du dein Sortierungsscript ersetzen kannst, ist die Sache schnell gelöst. jQuery-UI-Sortable wäre z.B. eine Lösung, da kannst du den Container und die sortierbaren Elemente recht frei bestimmen.

          Ok, soll heißen, Du würdest dazu raten, ui-sortable in Verbindung mit (Anzahl der tr-elemente geteilt durch 2) tbody-Elementen zu nutzen?

          Gruß, Gerald

          1. In gewisser Weise - wenn du dein Sortierungsscript ersetzen kannst, ist die Sache schnell gelöst. jQuery-UI-Sortable wäre z.B. eine Lösung, da kannst du den Container und die sortierbaren Elemente recht frei bestimmen.

            Ok, soll heißen, Du würdest dazu raten, ui-sortable in Verbindung mit (Anzahl der tr-elemente geteilt durch 2) tbody-Elementen zu nutzen?

            Nein, ich würde Sortable auf das table-Element anwenden und damit tbody-Element sorieren (die jeweils 2 tr-Elemente gruppieren) und thead und tfoot von der sortierung ausschließen :)

            Ich hab' das jetzt schnell auf jsfiddle gebaut und habe festgestellt, dass die breite der Zellen verworfen wird, sobald der Helper erzegut wird - um das zu umgehen, muss man sich seinen Helper selbst bauen und den td-Elementen die breite des originals zuweisen.

            Hier muss man natürlich noch das CSS berücksichtigen, wo dann durch eventuelle Rahmen oder Innenabstände width() nicht mehr den richtigen Wert zurückliefert.

            Aber als proof of concept sollte es taugen.

            1. Hi suit,

              erstmal danke für die Mühe, die Du Dir extrag machst! Hut ab.

              Ok, soll heißen, Du würdest dazu raten, ui-sortable in Verbindung mit (Anzahl der tr-elemente geteilt durch 2) tbody-Elementen zu nutzen?

              Nein, ich würde Sortable auf das table-Element anwenden und damit tbody-Element sorieren (die jeweils 2 tr-Elemente gruppieren) und thead und tfoot von der sortierung ausschließen :)

              Ja, so meinte ich das.

              Aber als proof of concept sollte es taugen.

              Ja, total.

              Dein Code funktioniert leider bei mir nicht. Aber in Summe geht es bei mir dann doch mit dem Code:

                
              <script>  
                  $(function() {  
                      $( "#sortable" ).sortable();  
                      $( "#sortable" ).disableSelection();  
                  });  
              </script>  
              
              

              Die Tabelle hat natürlich die entsprechende ID.

              Worin liegt der Unterschied zu Deinem JS-Teil?

              Gruß, Gerald

              1. Dein Code funktioniert leider bei mir nicht.

                Ich nehme an auf jsfiddle funktionierts, deine lokale Kopie aber nicht?

                Worin liegt der Unterschied zu Deinem JS-Teil?

                Wenn du den Code aus jsFiddle kopierst und bei dir verwenden willst, musst du ihne Ausführen, nachdem jQuery und das DOM geladen wurden - sprich es kommt auf die Reihenfolge im Code an (oder ob du den Code bei fertigstellung des DOM (ready) ausführst) - diese Dinge erledigt jsfiddle automatisch (in meinem Beispiel per onLoad - kann man einstellen),

                $(function() {

                Das hier ist eine Kurzschreibweise für $(document).ready(function() { - darum liegt obenstehender Schluß nahe.

                $( "#sortable" ).sortable();
                       $( "#sortable" ).disableSelection();

                Das kannst du, wie in meinem Beispiel auch chainen:
                $('#sortable').sortable().disableSelection();

                1. Wenn du den Code aus jsFiddle kopierst und bei dir verwenden willst, musst du ihne Ausführen, nachdem jQuery und das DOM geladen wurden -

                  Klar. Weiß auch nicht, was da falsch gelaufen ist, aber soviel war schon klar.

                  Was das Verwerfen der Zellenbreite angeht, da existiert übrigens ein Fix.

                  http://jsfiddle.net/bgrins/tzYbU/

                  Gruß, Gerald

                  1. Was das Verwerfen der Zellenbreite angeht, da existiert übrigens ein Fix.

                    Der in deinem Fall nicht funktioniert (weil du ja keine tr-Element sortierst sondern td-Elemente) und zudem etwas hölzern ausgeführt ist (unnötiges referenzieren und hardcodieren der zu sortierenden Elemente)

                    Meine Lösung sollte für tr und thead-Sortierung funktionieren und ist zudem sogar kürzer :p

                    1. Meine Lösung sollte für tr und thead-Sortierung funktionieren und ist zudem sogar kürzer :p

                      Läuft bei mir aber  nicht :-(

                      Kannst Du mal drüber schauen?

                      Gruß, Gerald

                        
                      <html>  
                       <head>  
                      <script type="text/javascript" src="./jquery-1.8.2.js"></script>  
                      <script type="text/javascript" src="./jquery-ui-1.9.0.custom.min.js"></script>  
                       </head>  
                       <body>  
                      <script>  
                      $("table").sortable({  
                          items: 'tbody',  
                          helper:  function(event, element) {  
                              helper = element.clone();  
                        
                              $('td', helper).each(function(index) {  
                                  $(this).width($('td', element).eq(index).width());  
                              });  
                        
                              return helper;  
                          }  
                      }).disableSelection();  
                      </script>  
                        
                        
                      <table border="1" rules="group">  
                          <thead>  
                              <tr>  
                                  <th>foo</th>  
                                  <th>bar</th>  
                                  <th>baz</th>  
                                  <th>qux</th>  
                                  <th>quux</th>  
                              </tr>  
                          </thead>  
                          <tbody>  
                              <tr>  
                                  <td>1.1</td>  
                                  <td>1.2</td>  
                                  <td>1.3</td>  
                                  <td>1.4</td>  
                                  <td>1.5</td>  
                              </tr>  
                              <tr>  
                                  <td colspan='2'>1.6</td>  
                                  <td colspan='3'>1.7</td>  
                              </tr>  
                          </tbody>  
                          <tbody>  
                              <tr>  
                                  <td>2.1</td>  
                                  <td>2.2</td>  
                                  <td>2.3</td>  
                                  <td>2.4</td>  
                                  <td>2.5</td>  
                              </tr>  
                              <tr>  
                                  <td colspan='2'>2.6</td>  
                                  <td colspan='3'>2.7</td>  
                              </tr>  
                          </tbody>  
                          <tbody>  
                              <tr>  
                                  <td>3.1</td>  
                                  <td>3.2</td>  
                                  <td>3.3</td>  
                                  <td>3.4</td>  
                                  <td>3.5</td>  
                              </tr>  
                              <tr>  
                                  <td colspan='2'>3.6</td>  
                                  <td colspan='3'>3.7</td>  
                              </tr>  
                          </tbody>  
                          <tbody>  
                              <tr>  
                                  <td>4.1</td>  
                                  <td>4.2</td>  
                                  <td>4.3</td>  
                                  <td>4.4</td>  
                                  <td>4.5</td>  
                              </tr>  
                              <tr>  
                                  <td colspan='2'>4.6</td>  
                                  <td colspan='3'>4.7</td>  
                              </tr>  
                          </tbody>  
                      </table>  
                       </body>  
                      </html>  
                        
                      
                      
                      1. Kannst Du mal drüber schauen?

                        Oops, schon gesehen :-)

                        1. Kannst Du mal drüber schauen?

                          Oops, schon gesehen :-)

                          Hehe :)

                          Damit das Archiv nicht dumm stirbt: $(document).ready() fehlt

                          1. Hehe :)

                            Damit das Archiv nicht dumm stirbt: $(document).ready() fehlt

                            Ok, hast recht, hätte ich auch schreiben können ;)

                            Kannst Du mir denn noch erklären (quasi in Worten), was die beiden Fixe machen und worin sie sich unterscheiden?

                            Mir gelingt es nämlich nicht, einen von Beiden auf Deine Lösung zu adaptieren.

                              
                            // Fix 1:  
                            // Return a helper with preserved width of cells  
                            var fixHelper = function(e, ui) {  
                                ui.children().each(function() {  
                                    $(this).width($(this).width());  
                                });  
                                return ui;  
                            };  
                              
                            $("#sort tbody").sortable({  
                                helper: fixHelper  
                            }).disableSelection();  
                              
                            //-----------------------------------------------------------------  
                            // Fix 2:  
                              
                            var fixHelperModified = function(e, tr) {  
                                var $originals = tr.children();  
                                var $helper = tr.clone();  
                                $helper.children().each(function(index)  
                                {  
                                  $(this).width($originals.eq(index).width())  
                                });  
                                return $helper;  
                            };  
                              
                            $("#sort2 tbody").sortable({  
                                helper: fixHelperModified  
                              
                            }).disableSelection();  
                              
                            
                            
                            1. Mir gelingt es nämlich nicht, einen von Beiden auf Deine Lösung zu adaptieren.

                              Ein Unterschied ist, dass ich die funktion direkt im Konfigurationsobjekt verwende und in diesen beiden Fällen die eine Variable verwendet wird - das ist im prinzip aber nur eine Handhabkarkeitsfrage.

                              Die helper-Funktion hat zwei Argumente (per default event und ui (diese ob die jetzt e und tr (wie dort) oder event und element heissen ist im endeffekt egal - das erste ist das event selbst (das interessiert uns nicht) das zweite Argument ist das Element welches sortiet wird.

                              Im Prinzip basieren alle darauf, dass sie zuerst das original Klonen und Hilfselement erstellen - dieser Klon ist nur eine Zeile (oder ein tbody-Element) und hat daher natürlich eine andere Zellenbreite als die anderen Elemente, da diese ja nicht alle gleich lang sind.

                              In einer Schleife wird werden nun alle tr-Element des Klons durchlaufen und deren Breite wird auf die Breite des Elements gesetzt, welches denselben Index besitzt wie das tr-Element im Original.

                              Während meine Lösung mit $('td', element) arbeitet und somit egal ob du jetzt tr oder tbody-Elemente verschiebst immer td-Elemente findet, arbeitet die andere Lösung mit childen - die Kinder eines thead-Elements sind aber tr-Elemente, die einzelnen td-Elemente werden dann völlig außer acht gelassen und natürlich in ihrer Breite nicht angepasst. Das children entspricht '>*' und ist natürlich eine völlig andere Ergebnismenge.

                              1. Hi suit,

                                bin hierhien hatte ich mir das selbst schon ungefähr zusammen gereimt.

                                Leider reichen Deine Angaben für mich noch nicht, um es auch anzuwenden.

                                Ich habe versucht, es auch über die Schleife zu clonen und zurückzugeben, geht aber so wie folgt nicht.

                                  
                                var fixHelperModified = function(event, element) {  
                                    var $originals = element.children();  
                                    var $helper = element.clone();  
                                  
                                    $helper.children().each(function(index)  
                                    {  
                                      $(this).width($originals.eq(index).width())  
                                    });  
                                    return $helper;  
                                
                                

                                Wenn ich dann mit "Deiner riginalzeile" zusätzlich arbeite, gelingt es mir zwar, die Breite der Tabellenzeilen beizubehalten, aber die Gesamthöhe der Tabelle bleibt nicht konstant.

                                Schau mal bitte:

                                  
                                var fixHelperModified = function(event, element) {  
                                    var $originals = element.children();  
                                    var $helper = element.clone();  
                                  
                                    $helper.children().each(function(index)  
                                    {  
                                      $(this).width($originals.eq(index).width())  
                                    });  
                                    return $helper;  
                                  
                                  
                                        $('td', helper).each(function(index) {  
                                            $(this).width($('td', element).eq(index).width());  
                                        });  
                                  
                                        return helper;  
                                
                                

                                Hier

                                Das children entspricht '>*' und ist natürlich eine völlig andere Ergebnismenge.

                                Den Satz habe ich gar nicht verstanden.

                                Dann bleiben  noch 2 Fragen,

                                1. Was bedeutet die Zeile items: 'tbody',
                                2. Wo kann ich die ganzen Parameter von "sortable" nachlesen, die habe ich nicht gefunden.

                                Gruß, Gerald

                                1. Hi suit,

                                  hast Du eine Ahnung, warum in folgendem Code die Input-fields nicht anwählbar und ausfüllbar sind?

                                    
                                  <html>  
                                  <head>  
                                  <script type="text/javascript" src="slbox/jquery.min.js"></script>  
                                  <script type="text/javascript" src="slbox/jquery-ui-1.9.0.custom.min.js"></script>  
                                  </head>  
                                  <body>  
                                    
                                  <script>  
                                  $(function() {  
                                  $( "#sort" ).sortable({  
                                   items: 'tbody',  
                                   opacity: 0.6,  
                                      helper:  function(event, element) {  
                                          helper = element.clone();  
                                    
                                          $('td', helper).each(function(index) {  
                                              $(this).width($('td', element).eq(index).width());  
                                          });  
                                    
                                          return helper;  
                                      }  
                                  }).disableSelection();  
                                  });  
                                  </script>  
                                    
                                  <form>  
                                  <table id="sort" BORDER=1 CELLSPACING=1 CELLPADDING=2>  
                                  <thead></thead>  
                                  <tbody>  
                                  <tr>  
                                  <td>111</td>  
                                  <td>04.10.2012</td>  
                                  <td>122050</td>  
                                  <td>3.0</td>  
                                  <td>qqqqq</td>  
                                  <td></td>  
                                  <td><input type=text name="feld1" value="0.00"></td>  
                                  <td ><input type=text name="feld2" value="0.00"></td>  
                                  <td >Test123</td>  
                                  </tr>  
                                    
                                  <tr>  
                                  <td  colspan=4>  
                                  </td>  
                                  <td>  
                                  xdhstrh  
                                  </td>  
                                  <td colspan=4>  
                                  </td>  
                                  </tr>  
                                  </tbody>  
                                  </table></form>  
                                  </body>  
                                  </html>  
                                  
                                  
                                  1. hast Du eine Ahnung, warum in folgendem Code die Input-fields nicht anwählbar und ausfüllbar sind?

                                    Ich vermute es liegt am disableSelection() :)

                                    1. Ich vermute es liegt am disableSelection() :)

                                      Ok. Dann find ich ne lösung.
                                      Gerald

                                      1. Hi,

                                        Mein Versuch ruft zwar das Script auf, es kommen auch $_GET Daten an, aber eben nicht die Sortierten IDs oder etwas ähnliches, sondern nur der action-parameter und die session-id.

                                        Was mache ich falsch oder wie gehts besser?

                                          
                                         update : function () {  
                                                  var order = $('#sort').sortable('serialize') + '&action=updateRecordsListings';  
                                                  $(\"#info\").load(\"a.php?\", order);  
                                              } ,  
                                          
                                        
                                        
                                        1. Was mache ich falsch oder wie gehts besser?

                                          Was hast du vor?

                                          1. Was mache ich falsch oder wie gehts besser?

                                            Was hast du vor?

                                            Habs schon gelöst.
                                            Man kann  das prinzipiell schon so lösen, aber das serialisierte Array bleibt leer, wenn man die ID nicht als "pre_"ID übergibt.
                                            Das ist also zwingend nötig.

                                            Schaust Du stattdessen mal hier herein?

                                            Gruß, Gerald

                                            1. Schaust Du stattdessen mal hier herein?

                                              nein - aber du kannst hier einen neuen Ast mit geändertem Titel machen :)

                                              1. Dann gehts also jetzt hier weiter.
                                                Gruss, Gerald

                                2. Das children entspricht '>*' und ist natürlich eine völlig andere Ergebnismenge.

                                  Den Satz habe ich gar nicht verstanden.

                                  Es ist ein unterschied ob du tbody-Elemente sortierst oder tr-Elemente

                                  Im ersteren Fall musst du die darunter liegenden tr- und td-Elemente bearbeiten und zweiteren nur die td-Elemente

                                  Darum stimmt auch die Breitenberechnung bei dem von dir gefundenen Script nicht - ich verstehe aber immer noch nicht, was du vor hast - mein fiddle funktioniert doch einwandfrei?

                                  Dann bleiben  noch 2 Fragen,

                                  1. Was bedeutet die Zeile items: 'tbody',

                                  Siehe unten:

                                  1. Wo kann ich die ganzen Parameter von "sortable" nachlesen, die habe ich nicht gefunden.

                                  In der Dokumentation
                                  http://api.jqueryui.com/sortable/

  2. Hi,

    nachdem es mir gelungen ist, innerhalbb einer Tabelle <tbody>-Elemente zu verschieben (danke an suit für den Wink in diese Richtung), würde ich gerne den Raum begrenzen, innerhalb dessen verschoben werden darf.

    Wenn ich das korrekt verstanden habe, bietet UI-Sortable hierfür die containment-Option.

    Leider ist aber oberhalb des tbody-Elements nur das table-element. Ich würde aber gerne innerhalb der Tabelle nur einen sehr begrenzten Bereich verschiebbar machen. Zwichen <table> und <tboby> gibt es aber hierarchisch nichts mehr.

    Ich könnte auch einen jQuery-Selector nehmen, aber auch bhier fällt mir keiner ein, der sich anbietet. Es sei denn, ich missverstehe die Option und könnte auch den Bereich begrenzen auf "zwischen IDt1 und IDt2" oder sowas.

    Fällt Euch noch was ein, wie ichs begrenzen kann ohne einen Tabelle in die tabelle zu setzen, das fänd ich doch sehr unschön.

    Gruß, Gerald

    1. Ich könnte auch einen jQuery-Selector nehmen, aber auch bhier fällt mir keiner ein, der sich anbietet. Es sei denn, ich missverstehe die Option und könnte auch den Bereich begrenzen auf "zwischen IDt1 und IDt2" oder sowas.

      Fällt Euch noch was ein, wie ichs begrenzen kann ohne einen Tabelle in die tabelle zu setzen, das fänd ich doch sehr unschön.

      Die items-Option ist die Lösung für dein Problem, hier kannst du problemlos die Elemente selektieren, die sortiert werden sollen dürfen[sic?] - die dreckige Variante ist, dass du einfach jedem sortierbaren Wlement eine Klasse verpassst und diese als Selektor verwendest.

      Möglicherweise kannst du aber auch eine Collection angeben und z.B. mit slice() arbeiten.

      1. Die items-Option ist die Lösung für dein Problem,

        Die verwende ich bereits. Sie löst aber mein Problem nicht.

        hier kannst du problemlos die Elemente selektieren, die sortiert werden sollen dürfen[sic?]

        Klar, soweit, so funktionabel.
        Mein Problem st aber ein anderes.

        Nachdem ich nun über die item-Option angebe, was alles sortiert werden darf, sind die immer noch über ihre "Ränder" hinaus ziehbar. Sie sind zwar dort nicht droppeble aber dorthin draggebel.

        Außerdem mußte ich hierfür die Klasse "ui-state-disabled" umschreoben, die damit nicht mehr dem Original entspricht.

        Das ist jetzt Stand der Dinge:

        Aber die 3 sortierbaren <tbodys> kannst Du weit über die Tabelle hinaus draggen (wenn auch nicht droppen).

        Das ist halt unschön und ich glaube, die containment option wäre hier hilfreich, wenn es eine Ebene zwischen <table> und <tbody> gäbe. Dann wäre containment: 'parent' mein Freund.

        <table id='sortable'>  
        <tbody class=\"ui-state-default ui-state-disabled\">  
        <tr><td></td></tr>  
        <tr><td></td></tr>  
        <tr><td></td></tr>  
        </tbody>  
        <tbody id='my_1'  
        <tr><td></td></tr>  
        </tbody>  
        <tbody id='my_2'  
        <tr><td></td></tr>  
        </tbody>  
        <tbody id='my_3'  
        <tr><td></td></tr>  
        </tbody>  
        <tbody class=\"ui-state-default ui-state-disabled\">  
        <tr><td></td></tr>  
        <tr><td></td></tr>  
        <tr><td></td></tr>  
        </tbody>  
        </table>
        
        1. Mein Problem st aber ein anderes.

          OK, jetzt hab' ich dich verstanden: du musst für das Containment nicht zwangsläufig ein Element angeben, du kannst auch einfach eine bounding-box definieren (als Array). Diese Eckpunkte musst du natürlich erst berechnen.

          Dazu hilft dir ggf. das hier weiter:
          http://forum.de.selfhtml.org/archiv/2012/9/t211216/

          1. Dazu hilft dir ggf. das hier weiter:
            http://forum.de.selfhtml.org/archiv/2012/9/t211216/

            'Kennst Dich echt gut aus damit, klasse.

            Aber ich glaube, das ist mir zu aufwändig. Ich moien, es passiert ja ansich nichts Dramatisches, außer das der User es halt zu weit draggen kann. Aber er kanns dort nicht absetzen, also alles halb so wild. Sieht nur etwas unschön aus, wenn User Dinge tun kann, die nicht von Bestand sind.

            Aber die Koordinaten ein er sich dynamisch verändernden Tabelle ausfindig zu machen, sieht mir recht schwierig aus.

            Gerald

            1. Dazu hilft dir ggf. das hier weiter:
              http://forum.de.selfhtml.org/archiv/2012/9/t211216/

              'Kennst Dich echt gut aus damit, klasse.

              Berufskrankheit :)

              Ich bin wirklich froh, dass es jQuery und jQuery UI gibt - macht meine Arbeit um einiges leichter.

              Aber ich glaube, das ist mir zu aufwändig.

              Das ist eine einfache Kosten-Nutzen-Frage die du selbst beantworten musst.

              Aber die Koordinaten ein er sich dynamisch verändernden Tabelle ausfindig zu machen, sieht mir recht schwierig aus.

              Ansich nicht - du musst nur eine Funktion schreiben die die Koordinaten bestimmt und setzt und diese dann nach jeder Veränderung der Tabele aufrufen (bzw. 1x am Anfang).

              Mit ausprobieren und testen ist das in 30 bis 90 Minuten erledigt.

  3. Hi (suit) ;-)

      
    <style type="text/css">...  
    .ui-state-highlight { background-color: #F6F698; height: 1.5em; line-height: 1.2em; border: dashed 1px gray; }  
    ...  
    </style>  
    
    
      
     placeholder: 'ui-state-highlight',  
    
    

    Aber es passiert nichts :-(
    Irgendwas in meinem (ellenlangen) CSS-Sheet muß dem dergestalt entgegegen wirken, dass 'ui-state-highlight' außer Gefecht setzt.

    Kann das?

    Gerald

    1. Hi (suit) ;-)

      :)

      placeholder: 'ui-state-highlight',

      
      >   
      > Aber es passiert nichts :-(  
        
      Der Placeholder wird bei deiner Tabelle wahrscheinlich nicht wie gewünscht funktionieren (das sortable-Plugin ist ja eigentlich nicht für Tabellen gedacht - also gibts gar keinen Placeholder) - den musst du ziemlich erst erzeugen - dabei hilft ein undokumentiertes Feature:  
        
      <https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.sortable.js#L663>  
        
      Einfach ein Element erzeugen, welches wie eine deiner Zeilen aussieht (kannst du natürlich auch noch schöner machen) und diese kannst du dann entsprechend gestalten:  
      <http://jsfiddle.net/jvhms/>
      
      1. Einfach ein Element erzeugen, welches wie eine deiner Zeilen aussieht (kannst du natürlich auch noch schöner machen) und diese kannst du dann entsprechend gestalten:
        http://jsfiddle.net/jvhms/

        Funktioniert klasse.
        Eiun kleines Problem ist aber, dass der Placeholder manchmal dünner, manchmal dicker wird. Bzw., wenn der zu verschiebende tbody eine große Höhe hat, muß man ih n sehr tief verschieben, damit etwas passiert. Kann man diese beiden Mankos irgendwie "workarounden"?

        Unbd noch eine Frage:

        Kann man dem zu verschiebenden Element (also tbody in meinem Fall) für den Zeitraum des Verschiebens eine eigene Klasse zuweisen?

        Grüße, Gerald

        1. Eiun kleines Problem ist aber, dass der Placeholder manchmal dünner, manchmal dicker wird. Bzw., wenn der zu verschiebende tbody eine große Höhe hat, muß man ih n sehr tief verschieben, damit etwas passiert. Kann man diese beiden Mankos irgendwie "workarounden"?

          Die Höhe des Placeholders auf die des zu verschiebenden Elements setzen.

          Kann man dem zu verschiebenden Element (also tbody in meinem Fall) für den Zeitraum des Verschiebens eine eigene Klasse zuweisen?

          Den "helper" kannst du zusammenbauen wie du willst.

          1. Die Höhe des Placeholders auf die des zu verschiebenden Elements setzen.

            Den "helper" kannst du zusammenbauen wie du willst.

            Danke für die Antwort. Aber die gibt mir bisher nur einen Hinweis darauf, dass das möglich ist.
            Ich denke, Du erkennst inzwischen, dass ich nicht nur frage und auf Antwort warte, sondern ganz viel auch auf anderen Seiten, in Dokus usw. parallel hinzu lerne.

            Wo nehm ich denn die Höhe des zu verschiebenden Elements her? Und wie füge ich sie dynamisch dem placeholder zu?

            Hinzufügen der Klasse über den Helper such ich jetzt dann mal im Netz weiter.

            Gruß, Gerald

            1. Danke für die Antwort. Aber die gibt mir bisher nur einen Hinweis darauf, dass das möglich ist.

              Das war der Sinn der Sache.

              Ich denke, Du erkennst inzwischen, dass ich nicht nur frage und auf Antwort warte, sondern ganz viel auch auf anderen Seiten, in Dokus usw. parallel hinzu lerne.

              Natürlich :)

              Wo nehm ich denn die Höhe des zu verschiebenden Elements her? Und wie füge ich sie dynamisch dem placeholder zu?

              Hinzufügen der Klasse über den Helper such ich jetzt dann mal im Netz weiter.

              Musst du nicht - du musst dir nur das derzeitige jsfiddle-Beispiel ansehen, da sind die nötigen Komponenten bereits vorhanden - unter anderem wird dort ja ein helper gebaut (ein Klon des Originals) und bekommt dann die Breite und Höhe dessen zugewiesen.

              Wie man (prinzipiell) einen Placeholder baut weißt du auch - du musst also nur 2 und 2 zusammenzählen - möglicherweise hilft hier ein bisschen Trial & Error mit entsprechenden Kontrollausgaben.

  4. Hi,

    mir gelingt es ganz gut, die multisortable-Erweiterung in einem "trial_Error_Script" umzusetzen.

      
    <html>  
    <head>  
    <script src="../vendor/jquery.js" type="text/javascript"></script>  
    <script src="../vendor/jquery-ui.js" type="text/javascript"></script>  
    <script src="../lib/jquery.multisortable.js" type="text/javascript"></script>  
    <script type="text/javascript">  
    jQuery(function($){  
    $('table.sortable').multisortable();  
    $('table#list1').sortable();  
    });  
    </script>  
      
    <style type="text/css">  
    tbody.selected { background-color:#F8BF74; }  
    </style>  
    </head>  
    <body>  
    <table id='list1' class="sortable">  
    <tobdy id='t_1'><tr><td>1</td><td>aaa</td></tr></tbody>  
    <tobdy id='t_2'><tr><td>2</td><td>bbb</td></tr></tbody>  
    <tobdy id='t_3'><tr><td>3</td><td>ccc</td></tr></tbody>  
    <tobdy id='t_4'><tr><td>4</td><td>ddd</td></tr></tbody>  
    <tobdy id='t_5'><tr><td>5</td><td>eee</td></tr></tbody>  
    <tobdy id='t_6'><tr><td>6</td><td>fff</td></tr></tbody>  
    <tobdy id='t_7'><tr><td>1aaaaaaaa</td><td>aaa</td></tr></tbody>  
    <tobdy id='t_8'><tr><td>2aaaaaaaaa</td><td>bbb</td></tr></tbody>  
    <tobdy id='t_9'><tr><td>3aaaaaaaa</td><td>ccc</td></tr></tbody>  
    <tobdy id='t_10'><tr><td>4aaaaaaaaa</td><td>ddd</td></tr></tbody>  
    <tobdy id='t_11'><tr><td>5aaaaaaaaaa</td><td>eee</td></tr></tbody>  
    <tobdy id='t_12'><tr><td>6aaaaaaaa</td><td>fff</td></tr></tbody>  
    </table>  
    </body>  
    </html>  
    
    

    Was mir nicht gelingt, ist das Zusammenspiel im "Echtscript".

    Die Tabellenzeilen bzw. tbodys werden nicht farblich markiert und sie brechen mir weder in der Breite komplett ein.

    Das Echtscript sieht derzeit so aus

      
    $(function() {  
    $( "#mysortlist" ).sortable({  
     items: 'tbody:not(.ui-state-disabled)',  
        helper:  function(event, element) {  
            helper = element.clone();  
      
            $('td', helper).each(function(index) {  
                $(this).width($('td', element).eq(index).width());  
            });  
      
            return helper;  
        },  
      
    forcePlaceholderSize: true,  
        placeholder:  {  
             element: function() {  
                 return '<tbody class="ui-sortable-placeholder"><tr><td colspan="9" align="middle">Ziel</td></tr></tbody>';  
            },  
            update: function(container, p) {  
                return;  
            }  
        },  
      
    }).disableSelection();  
    });  
    
    

    Ohne Multisortierung spielt das Echtscript wirklich gut und zufriedenstellend.

    Aber das Trial_error_script ist auch sehr funktionabel.

    Wie bekomme ich denn diese beiden unter "einen Hut" zu einem neuen "Echtscript"?

    Ich habe es so versucht und das scheint zu funktionieren, aber da bricht mir eben die Zeilenbreite ein  und die Zeilen bzw. tbody - Markierung funktioniert nicht.

      
    $(function() {  
    $( \"#sort\" ).multisortable();  
    $( \"#sort\" ).sortable({  
    items: 'tbody:not(.ui-state-disabled)',  
        helper:  function(event, element) {  
    ... usw.  
    
    

    Den Style "tbody.selected { background-color:#F8BF74; }" hatte ich natürlich auch bhier hinterlegt.

    Er wird auch angewendet, aber man sieht es nicht. :-(

    Inzwischen ist mir der Scriptteil aber auch für weiteres Trial+Error etwas zu kompliziert geworden und ich gewinne zunehmends den Eindruck "ins Blaue hinein" zu versuchen. Sprich, mein Script wird für mich zur Wundertüte und selbst, wenns dann wie gewünscht laufen würde, würde ich mir nicht sicher sein können, dass das ganze Hand+Fuß hat und unter allen Umständen auch später funktionieren wird.

    Ich weiß gar nicht, was ich jetzt fragen soll ;-)

    Sicher hat Suit mir bereits alles gesagt, was auch zur Lösung dieses Problemes beitragen würde/wird. Aber ich bekomms grad nicht umgesetzt.

    Gruß, Gerald

    1. Wie bekomme ich denn diese beiden unter "einen Hut" zu einem neuen "Echtscript"?

      Nachdem dieses Plugin das ursprüngliche sortable teilweise überschreibt wirdst du dort die Änderungen in ähnlicher Form vornehmen müssen.

      Sicher hat Suit mir bereits alles gesagt, was auch zur Lösung dieses Problemes beitragen würde/wird. Aber ich bekomms grad nicht umgesetzt.

      Die Lösung für dieses Problem ist den multisortable-Code mit dem sortable-Code zu vergleichen und dann die Änderungen entsprechend auch dort nachzuziehen.

      Das ist sicher kein Problem aber eine Spielerei - zudem musst du bei diesem Drittplugin eventuell davon ausgehen, dass du bei eventuellen Updates diese Änderungen dann nochmal machen musst.

      Sprich du erweiterest bereits sortable um eine funktion die es nicht kann und erweiterst dieses dann um eine Ffunktion die es nicht kann + auch dieses wiederum um eine weitere funktion die es nicht kann.

      Inception.

      Das wird die Wart- und Updatebarkeit in Zukunft ziemlich einschränken.

      Hier solltest du zuerst ein Kosten-Nutzen-Abwägung machen - ich halte das jedenfalls nicht für sonderlich schlau - den gennau das sind dann die Dinger die bei einem "machen mir mal schnell ein Update (Bugfix)" 2 Tage zusatzaufwand verursachen.

      1. Hier solltest du zuerst ein Kosten-Nutzen-Abwägung machen - ich halte das jedenfalls nicht für sonderlich schlau - den gennau das sind dann die Dinger die bei einem "machen mir mal schnell ein Update (Bugfix)" 2 Tage zusatzaufwand verursachen.

        Glaubst Du denn, dass das normale Ui-Sortable-Plugin die multisort-Funktionalität irgendwann mal "auch so, also tonusmäßig" hinzu bekommt?

        Ich bin ganz neu, was JQuery und UI angeht, daher kann ich das nicht einschätzen.

        Gruß, Gerald

        1. Glaubst Du denn, dass das normale Ui-Sortable-Plugin die multisort-Funktionalität irgendwann mal "auch so, also tonusmäßig" hinzu bekommt?

          Möglicherweise - aber nach aktuellem Stand nicht:
          http://wiki.jqueryui.com/w/page/12138038/Roadmap

          Und wenn, wird das noch einige Zeit dauern - das Timepicker-Add-On z.B. hängt da schon gefühlte 2 Jahre drin, ohne dass hier etwas nennenswertes passiert.

          Ich bin ganz neu, was JQuery und UI angeht, daher kann ich das nicht einschätzen.

          Wenn man auf dieses Feature verzichten kann, würde ich es weglassen - ich denke sowieso nicht, dass das ein Benutzer schnell kapieren wird, dass das so geht :)

          1. Wenn man auf dieses Feature verzichten kann, würde ich es weglassen - ich denke sowieso nicht, dass das ein Benutzer schnell kapieren wird, dass das so geht :)

            Tja...kann man, kann man nicht?
            Ich denke, man kann.
            Bis dato verzichte ich ja sogar auf das solo-sortable.

            Ich kenn meine Nutzer (bisher noch) persönlich. Daher kann ich davon ausgehen, dass sie es kapieren würden.

            Aber Du hast recht, ich denke ebenfalls, dass nichtmal das solo-sortable wirklich genutzt werden wird. Ich habe schon so viel "in den leeren Schrank hinein" entwickelt...

            Demnach, effizient ist sowas echt nicht.

            Wenn ich gleich so viel Zeit in den Vertrieb stecken würde, gings mir sicher besser ;-)

            Gruß, Gerald