[JavaScript] SAU: Elemente vertauschen?

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Telefonzelle, 5. April 2008 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 5. April 2008
    SAU: Elemente vertauschen?

    Hi,

    ich suche ne Möglichkeit, 2 Elemente die Plätze tauschen zu lassen. Von mir aus mit schönen Effekten, is aber nich nötig. Wird benutzt werden um 2 <tr>'s zu vertauschen, oder halt je nach Möglichkeiten einzelne Elemente daraus.

    Greetings.
     
  3. 5. April 2008
    AW: SAU: Elemente vertauschen?

    Ich kann zwar kein Javascript, aber so schwer kann es nicht sein:

    1. Inhalt von tr 1 nehmen und in eine Variable packen
    2. Inhalt von tr 2 nehmen und in tr 1 packen
    3. Inhalt von Variable nehmen und in tr 2 packen

    Fertig!

    Gruss 6000Loader
     
  4. 5. April 2008
    AW: SAU: Elemente vertauschen?

    also geht es jez um das projekt "Sau" wo auch frubar etc. is?

    weil wenn ja dann im irc einfach mal

    "/j #xchannel" und dr. scream oder spike anlabern

    MfG
     
  5. 5. April 2008
    AW: SAU: Elemente vertauschen?

    HTML:
     <script language="javascript" type="text/javascript">
 //<![CDATA[
/**
 * This method changes the content of two tables rows.
 * 
 * @param object oLink -> the pressed link in the row
 * @param int iDirection -> 1 "nach oben", 0 "nach unten"
 */
function changeRows(oLink, iDirection) {
 //basic vars of this method
 oLink = $(oLink);//extend the link properties with the prototype properties
 var oClickedRow = oLink.up('tr');//to prevent redundancies
 var otherRow = (iDirection) ? oClickedRow.previous('tr') : oClickedRow.next('tr');
 var sTemp = otherRow.innerHTML;

 otherRow.update(oClickedRow.innerHTML);
 oClickedRow.update(sTemp);
}
 //]]>
 </script>
 </head>
 <body>
 <table>
 <tbody>
 <tr>
 <td>Test</td>
 <td>
 &nbsp;
 </td>
 </tr>
 <tr>
 <td>Test</td>
 <td>
 <a href="#" onclick="changeRows(this, 1);return false;" title="Nach oben">Nach oben</a>
 </td>
 </tr>
 </tbody>
 </table>
    sollte auf jeden Fall laufen ....
     
  6. 6. April 2008
    AW: SAU: Elemente vertauschen?

    oder ganz einfach und sogar ohne innerHTML was bei xhtml a weng buggy is

    (mit der funktion toggleElementsUsingEffects hast du genau das was du in der pn wolltest )
    HTML:
    <html>
 <head>
 <script type="text/javascript" src="prototype.js"></script>
 <script type="text/javascript" src="scriptaculous.js?load=effects"></script>
 <script type="text/javascript"> 
 /**
 * toggles two elements using DOM
 *
 * @param string e1 [element1]
 * @param string e2 [element2]
 * @return void
 */
 function toggleElements(e1, e2) {
 //get elements by id "e1" and "e2"
 var element1 = $(e1), element2 = $(e2);
 if(element1 && element2) { //nodes found
 var parent = element1.parentNode;
 var clones = [
 element1.cloneNode(true), 
 element2.cloneNode(true)
 ];
 
 //toggle (replace nodes)
 parent.replaceChild(clones[1], element1);
 parent.replaceChild(clones[0], element2);
 }
 }
 
 /**
 * toggles two elements using DOM and effect.fade/appear
 *
 * @param string e1 [element1]
 * @param string e2 [element2]
 * @return void
 */
 function toggleElementsUsingEffects(e1, e2) {
 //get elements by id "e1" and "e2"
 var element1 = $(e1), element2 = $(e2);
 if(element1 && element2) {
 var parent = element1.parentNode;
 var clones = [
 element1.cloneNode(true),
 element2.cloneNode(true)
 ];
 
 //keep new elements invisable until Effect.Appear
 clones[0].style.display = clones[1].style.display = 'none';
 
 //fadeout element2
 Effect.Fade(element2, { afterFinish: function() {
 //replace node and appear new element2
 parent.replaceChild(clones[0], element2);
 Effect.Appear(clones[0], { afterFinish: function() {
 //fadeout element1
 Effect.Fade(element1, { afterFinish: function() {
 //replace node and appear new element1
 parent.replaceChild(clones[1], element1);
 Effect.Appear(clones[1]);
 }});
 }});
 }});
 }
 }
 </script>
 </head>
 <body>
 <div id="element1">hallo welt, ich bin element1</div>
 <div>hallo welt, ich steh hier nur so rum</div>
 <div id="element2">hallo welt, ich bin element2</div>
 <a href="javascript:void(0);" onclick="toggleElements('element1', 'element2');">elemente tauschen</a><br />
 <a href="javascript:void(0);" onclick="toggleElementsUsingEffects('element1', 'element2');">elemente tauschen mit effekt</a>
 </body>
</html>
    musst nur darauf achten das beide elemente im selben eltern-knoten sind, das kann bei einer tabelle nur ein tr-element sein (in <thead> oder <tbody> oder eben <table>) wobei dann im IE der fade-effekt ned klappt (kannst ja a weng umschreiben)

    sau hat übrigens eine drag-drop klasse mit der du elemente via drag&drop tauschen kannst. näheres dazu findest du in der api von sau oder wenn du den quelltext ließt von der dragdrop.js
     
  7. 6. April 2008
    AW: SAU: Elemente vertauschen?

    Jo, sowas hab ich gesucht, habs jedoch vorerst mit puren HTML Formularen und ständigen nervigen reloads gemacht, da ichs nicht wirklich schön hinbekommen habe. Werd das ggf. am Ende wenn ich noch Zeit über hab nochmal rekonstruieren, ggf. auch mit Drag & Drop, was natürlich 'ne noch schönere Lösung wäre. Danke.
     
  8. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.