Ajax Drag&Drop

[hiro]

Hallo,
also ich bin auf der Suche nach nen Simplen Drag&Drop Script. Hab einige im Web gefunden aber da blickt man wirklich nicht durch und haben zuviel schnick schnack.

Also ich hab einige divs untereinander und die sollten sotiert werden und die sotierungsreihenfolge sollte dann an php weitergegeben werden.

Kennt da jemand was nettes?

[tontechniker]

Da gibts script.aculo.us (Sortables), ein Plugin für jQuery, meinen persönlicher Favorit mootools (Sortables) und einige mehr ...

[hiro]

Hab mir jetzt mootools angeschaut und scheint gut zu funktonieren.
Ich hab aber die ganze libary runtergeladen, welche werden den für die sortables benötigt?

Ich brauch das ganze color dings nicht. Will eben nur das li element rauf oder runter schieben können.

Was müsste ich dann bearbeiten damit ich die Sortierungsliste an PHP weitergeben kann? Also an nen Formular...

Danke schonmal

[Click]

Ich bevorzuge script.acoul.us, da mooltools nicht so browserkompatibel sind wie script.acoul.us

[tontechniker]

Ich brauch das ganze color dings nicht. Will eben nur das li element rauf oder runter schieben können.

Geh einfach auf Download und wähl unten Sortables aus, alle dafür benötigten Pakete werden mitausgewählt.

Was müsste ich dann bearbeiten damit ich die Sortierungsliste an PHP weitergeben kann? Also an nen Formular...

Über die Methode serialize bekommst du eine Liste mit der Reihenfolge der Elemente (z. B. 1,5,3,4,2) - diese Kannst du dann zum Beispiel in ein verstecktes Formularfeld schreiben:

window.addEvent('domready', function() {
new Sortables($( 'liste' ), {
 
	onComplete: function(){
		$ ( 'formularfeld' ).value = this.serialize();
	};
 
});
});

Ich bevorzuge script.acoul.us, da mooltools nicht so browserkompatibel sind wie script.acoul.us

Also abgesehen davon das ich auf script.aculo.us gerade nichts über Browser finden kann sollte folgendes doch reichen oder?

MooTools is compatible and fully tested with Safari, Internet Explorer 6 and 7, Firefox (and its mozilla friends), Opera and Camino.

[Click]

viele mootools effekte funzen mit dem konqueror nicht, was für mich ein grund dafür ist etwas anderes zu benutzen, da der konqueror ein guter und aktueller browser ist. bei script.acoul.us gibt es zwar auch effekte die da nicht korrekt angezeigt werden, es sind aber deutlich weniger.

Hier eine Liste der unterstützten Browser

Letzendlich sind beide nicht vollkommen und bei mir kommt es auf die Effekte an die ich benötige und bei welchen Browser sie funktionieren.

[hiro]

Original geschrieben von tontechniker
Geh einfach auf Download und wähl unten Sortables aus, alle dafür benötigten Pakete werden mitausgewählt. Über die Methode serialize bekommst du eine Liste mit der Reihenfolge der Elemente (z. B. 1,5,3,4,2) - diese Kannst du dann zum Beispiel in ein verstecktes Formularfeld schreiben:

window.addEvent('domready', function() {
new Sortables($( 'liste' ), {
 
	onComplete: function(){
		$ ( 'formularfeld' ).value = this.serialize();
	};
 
});
});

Also abgesehen davon das ich auf script.aculo.us gerade nichts über Browser finden kann sollte folgendes doch reichen oder?

Hey das hat mir jetzt echt geholfen Nur kenne mich mit Js/Ajax net so gut sollte das Feld dann so auschauen?

xHTML-Datei:

<form method="post" action="index.php?action=SAVE">
[...]
<input type="submit" accesskey="s" value="{lang}wcf.global.button.submit{/lang}" />
<input type="reset" accesskey="r" value="{lang}wcf.global.button.reset{/lang}" />
input type="hidden" name="formularfeld" value="" />
</form>

Eine PHPCode änderung is dann nicht notwendig oder?

[tontechniker]

viele mooltools effekte funzen mit dem konqueror nicht, was für mich ein grund dafür ist etwas anderes zu benutzen, da der konqueror ein guter und aktueller browser ist.

Das stimmt, muss man halt ausprobieren welche Effekte man wirklich braucht - grundsätzlich gefällt mir mootools halt besser weil die meisten Features schneller und kompakter zur Verfügung stellt und insgesamt schon wesentlich kleiner ist als Prototype alleine.

Nur kenne mich mit Js/Ajax net so gut sollte das Feld dann so auschauen?

Mit $ ( ) ließt du normalerweise Ids aus (getElementById), das Feld muss also so ausssehen:

<input id="formularfeld" name="nameFürPOST">

[hiro]

Also ich hab das ganze jetzt so

<script type="text/javascript">
window.addEvent('domready', function() {
new Sortables($( 'liste' ), {
 
	onComplete: function(){
		$ ( 'formularfeld' ).value = this.serialize();
	};
 
});
});
	</script>

<form method="post" action="index.php?action=Sort">
  <div style="overflow: hidden;">
    <ul style="list-style: none; padding: 0; margin: 0;">
      {foreach from=$menuItems item=wi}
        <div id="liste">
          <li style="padding: .30em 0;" class="subHeadline" class="sortme">
                      
          <div style="float:left;">
          <div style="float:left; width: 5%; padding-top: 0.55em;">
            <img src="{@$wi.menuItemIcon}" alt="" title="{lang}{@$wi.menuItem}{/lang}" />
          </div>
          <div style="padding-left: 35px;">
            <h3>
              <a href="#">{lang}{@$wi.menuItem}{/lang}</a>
              <i>[ID-{@$wi.menuItemID}]</i>
            </h3>
            <p class="light smallFont"><i>&raquo; {@$wi.menuItemLink}</i></p>
          </div>
          </div>
                      
          <div style="float: right; padding-top: .30em">
          [...]
          </div>
          <div style="clear: both; display: hidden; content: 0;"></div>
          </li>
        </div>
      {/foreach}
    </ul>
  </div>
  <div class="formSubmit">
  <input type="submit" accesskey="s" value="Submit" />
  <input type="hidden" name="formularfeld" value="WAS FÜR NE POSTNAME?" />
  {@SID_INPUT_TAG}
  </div>
</form>

Aber jetzt funzt das ganze Drag&Drop garnicht mehr
Woran kann das liegen?