✔ "sortable" inhalte in einem div mit jquery dynamisch ausgeben

[mogmog]

Hallo zusammen ich habe folgendes Problem:

Ich habe mir eine Sortierfunktion mir jquery geschrieben nun habe ich eine DIV in dem alle Bilder die gezeigt werden sollen zusehen sind. Wie kann ich jetzt mit Jquery Dynamisch ein inputfeld erstellen das in dem Value alle ID`s der grafiken anzeigt.

die ist mein ansatz:

$("#bilder_angezeigt").mousedown(function(){
		$("#ausgabe")
		.html("<input type=\"text\" value=\"pildreihenfolge\" value\"' + inhalt_von_target + '\" >");
		});

ich habe leider keinen Ansatz wie ich die variable "inhalt_von_target" erstellen kann.

 

[Sven Mintel]

Moin,

das wäre eine Möglichkeit:

$("#bilder_angezeigt").mousedown(function(){
  $("#ausgabe")
    .html('<input type="text" name="pildreihenfolge" value="' + 
          jQuery.map($(this).find('img[id]'), function(n){return (n.id);}).join(',') + 
          '" />');
});

Beim join() kannst du den Separator angeben.

 

[mogmog]

Hey danke dir. das funktioniert super!

nur noch eine kleine frage dazu wieso habe ich das Problem wenn ich ein Bild an die Ausgabe stelle bewege. Das die letzte Bild ID mit ausgegeben wird wenn ich ein weiteres mal mal darauf klicke?

 

[Sven Mintel]

Mmmh, so recht weiss ich jetzt nicht, was du meinst...hast du das irgendwo online?

Generell aber mal kurz eine kurze Erklärung, vielleicht reicht diese ja schon aus:

Ziehe nicht aus dem, was du siehst, Schlüsse auf das, was passiert.
Das Verschieben des Bildes hat keine Änderung der Platzierung des Bildes in der Knotenstruktur zur Folge. Das Bild befindet sich an seiner ursprünglichen Position in der Knotenstruktur, bis du es irgendwo droppen lässt.

 

[mogmog]

Hey,

Ich habe es soweit hin bekommen in dem ich einfach "mouseout" nutze das geht super zumindest riecht es völlig für das was ich machen will.

Ich habe gerade noch eine Idee Gehapt das ganze kann ich doch auch auf einen eine Sortierung von Elementen übernehmen. Also ich meine damit ich habe z.B.:

<div id="sortable">

  <div id="inhalt_1">
    <div id="11" class="umsortierbarer_Inhalt"></div>
  </div>
  <div id="inhalt_2">
    <div  id="12" class="umsortierbarer_Inhalt"></div>
  </div>
  <div id="inhalt_3">
    <div  id="13" class="umsortierbarer_Inhalt"></div>
  </div>

</div>

wenn ich jetzt aus einem der drei div raus gehe sollen alle Inhalte der div`s in id="sortable"
angezeigt werden sollen welches aber mit dieser Lösung nicht möglich ist.

   /*
     ("#bilder_angezeigt") hier wird der eine div festgelegt
      mousedown legt ja fest wie
  */
$("#bilder_angezeigt").mousedown(function(){
		$("#ausgabe")
		.html("<input type=\"text\" value=\"pildreihenfolge\" value\"'  + 
                jQuery.map($(this).find('img[id]'), function(n){return (n.id);}).join(',') + '\" >");
		});

grüße

 

[mogmog]

Also ich habe es soweit Hin bekommen habe aber nur ein kleines Problem mit dem sting der ausgegeben wird Wie kann ich das umgehen?

HTML elemente:

<div id="sortable">

  <div id="inhalt_1">
    <div id="11" class="umsortierbarer_Inhalt"></div>
    <div  id="12" class="umsortierbarer_Inhalt"></div>
  </div>
  <div id="inhalt_2">
    <div  id="13" class="umsortierbarer_Inhalt"></div>
  </div>

</div>

der Java code:

$("#sortable")
  .mouseout(function()
  {
    $("#ausgabe")
    .html(
    jQuery.map($(this).find(\'div[id] .inhalt_1\'), function(n, i){return (n.id+\',1\');}).join(\';\')
    +
    jQuery.map($(this).find(\'div[id] .inhalt_2\'), function(n, i){return (n.id+\',2\');}).join(\';\')
    );
});

HTML Ausgabe:

/* ausgabe */
11,1;12,113,2 

/* das sollte aber so aussehen  */
11,1;12,1;13,2

Wie bekomme ich es hin das in der Mitte ein ; ausgegeben wird wenn im "inhalt_2" ein Element enthält.

 

[Quaese]

Hi,

du musst das Semikolon bei der Verkettung der Strings setzen:

$("#sortable")
  .mouseout(function()
  {
    $("#ausgabe")
    .html(
    jQuery.map($(this).find('div[id] .inhalt_1'), function(n, i){return (n.id+',1');}).join(';')
    + ';' +
    jQuery.map($(this).find('div[id] .inhalt_2'), function(n, i){return (n.id+',2');}).join(';')
    );
});

Ciao
Quaese

 

[mogmog]

Jo danke dir aber das ein zigste Problem in diesem Fall ist dann nur wenn in der ersten spalte nichts ist dann sieht der String so aus ;1,1;1,2

mmmhhh aber das kann ich ja mit PHP checken und entfernen lassen. =)

 

[mogmog]

Hallo leute mir ist gerade noch was aufgefallen


also

<div id="sortable">

  <div id="inhalt_1">
    <div id="1" class="posfrapper">
    <div id="11" class="umsortierbarer_Inhalt"></div>
    <div  id="12" class="umsortierbarer_Inhalt"></div>
   </div>
  </div>
  <div id="inhalt_2">
    <div id="2" class="posfrapper">
      <div  id="13" class="umsortierbarer_Inhalt"></div>
    </div>
  </div>

</div>

Irgendwie funktioniert das ganze mit der positionsausgebe nicht richtig denn:

jQuery.map($(this).find('div[id] .inhalt_1'), function(n, i){return (n.id+',1');}).join(';')
    + ';' +
    jQuery.map($(this).find('div[id] .inhalt_2'), function(n, i){return (n.id+',2');}).join(';')

Wenn ich das so mache wie an der neuen position nicht an der 2 stelle 2oder1 ausgegeben sondern es wird so ausgegeben das wie es geladen wurde. ich wollte aber die neue Position wollte ich ja weiter geben.
will ich jetzt 2 werte übergeben dann bekomme ich nur false oder nichts ausgegeben

jQuery.map($(this).find('div[id] .inhalt_2').find('div[id] .poswrapper'), function(n, i){return (n.id+',2');}).join(';') /* da bekomme ich keine ausgabe */

jQuery.map($(this).find('div[id] .inhalt_2'), function(n, i){return (n.id+find('div[id] .poswrapper'));}).join(';') /* da bekomme ich "false" */

ich Check es nicht

 

[mogmog]

noch mal für Anfänger

Wenn ich das jetzt richtig verstanden habe ist das so:

jQuery.map('Array Start','ausgabe') <-- in diesem Element wird ein Array gestatten und gleichzeitig ausgegeben
find('div[id] .inhalt_2') <-- in einem Array alle div id´s finden
function{return (n.id);} <-- hier wird eine Funktion gestartet die für die Ausgabe zuständig ist nur das kann ich frei ändern in irgendwas anderes und die Daten werden aus übergeben wie man so mehrere variablen übergeben die fest definiert sind? Ähnlich wie bei php $var1[$i];$var2[$i] oder muss man so was mit Javascript nicht machen um mehrere werte aus verschieben Array in eine Ausgabe zu bekommen?

d.h. wenn ich 2 werte brauche und sie suchen lassen will muss ich die im Bereich des "Array Start" suchen lassen wie kann ich jetzt beide werte separat in die Ausgabe übergeben und ausgeben?

find('div[id] .inhalt_2').find('div[id] .posfrapper') <-- in Kombination funktioniert ja leider nicht oder ist der Fehler eher in der Ausgabe?