MrSpoocy: Draggable / Droppables / Sortierung

Hi,

Ich möchte gern mit Hilfe von scriptaculous eine kleine Liste machen welche man selber Sortieren kann. Das ganze möchte ich aber NICHT mit li/lu machen.
Die Methode mit Draggable / Droppables und Div Containern finde ich persönlich schöner.

Zur Erläuterung:

4x Draggable div's welche untereinander sind und schon von Anfang an die Droppable enthalten.
Wenn ich nun einen Drop "anfasse" und verschiebe soll einfach je nach dem wohin ich es schiebe das "besetzte" Draggle platz machen (nach oben oder unten in der Liste). Und wenn ich halt los lasse dann soll sie sie verankert bleiben.

	<div style="background-color: #00CCF; width: 600px; height: 150px;" id="places">  
		<div id="inhalt_one"  class="draggable">  
		Hier steht der Inhalt welcher verschoben wird, unter anderem Tabellen, Text und auch Bilder.  
		</div>  
	</div>  
	<script type="text/javascript">  
	Droppables.add('places',{accept: 'draggable', hoverclass: 'hover'});  
	new Draggable('inhalt_one',{revert: true});  
	</script>

Das ist jetzt nur 1 der 4 "listen gegenstände". Was muss ich machen um meine Vorstellung um zu setzen ?

mfg Spoocy

  1. Hi,

    Ich möchte gern mit Hilfe von scriptaculous eine kleine Liste machen welche man selber Sortieren kann. Das ganze möchte ich aber NICHT mit li/lu machen.
    Die Methode mit Draggable / Droppables und Div Containern finde ich persönlich schöner.

    Wenn du „schöner“ ausschliesslich auf die Optik beziehst - dann erkenne bitte die Unsinnigkeit deines Argumentes, und befasse dich mit CSS.

    Das ist jetzt nur 1 der 4 "listen gegenstände". Was muss ich machen um meine Vorstellung um zu setzen ?

    Dich mit der Doku des Scriptes beschäftigen ...?

    MfG ChrisB

    --
    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
  2. Ich möchte gern mit Hilfe von scriptaculous eine kleine Liste machen welche man selber Sortieren kann. Das ganze möchte ich aber NICHT mit li/lu machen.

    Willst du wirklich mit prototype arbeiten? 150 KiB für das was jQuery mit 25 KiB ahnlich gut kann? ;)

    1. Ich möchte gern mit Hilfe von scriptaculous eine kleine Liste machen welche man selber Sortieren kann. Das ganze möchte ich aber NICHT mit li/lu machen.

      Willst du wirklich mit prototype arbeiten? 150 KiB für das was jQuery mit 25 KiB ahnlich gut kann? ;)

      Ich würde das auch mit jQuery machen wenn es damit geht :)

      1. Ich würde das auch mit jQuery machen wenn es damit geht :)

        Na dann:
        http://jqueryui.com/demos/sortable/

        Das sollte dem entsprechen was du dir vorstellst.

        Die Beispiele sind zwar auch mit Listen gelöst, es geht aber auch ohne. Dennoch würde ich dir - wie auch ChrisB schon erwähnt hat - dazu raten, Listen zu verwenden und dich mit CSS zu beschäftigen, wenn dir die formatierung nicht passt.

        1. Die Beispiele sind zwar auch mit Listen gelöst, es geht aber auch ohne. Dennoch würde ich dir - wie auch ChrisB schon erwähnt hat - dazu raten, Listen zu verwenden und dich mit CSS zu beschäftigen, wenn dir die formatierung nicht passt.

          Naja, ich hab mich schon mit CSS beschäftigt. Mit "aussehen" meine ich auch nicht das wirkliche aussehen sondern eher der Code. Mir ist es ein bisschen suspekt in einen li-tag eine Tabelle und gar noch div-tags zu knallen.

          Mit Prototype hab ich es übrigens hin bekommen. Sehr einfach per
          sortable.add('place', {accept: 'draggleclass', hoverclass: 'hover'});

          Die jQuery Demo hab ich schon angeschaut. Aber nicht wirklich gesehen wie ich das ohne li-tag löse.

          1. Die jQuery Demo hab ich schon angeschaut. Aber nicht wirklich gesehen wie ich das ohne li-tag löse.

            Ein Elternelement mit mehreren Kindelementen ;) wie die Elemente heissen ist egal.

            1. Die jQuery Demo hab ich schon angeschaut. Aber nicht wirklich gesehen wie ich das ohne li-tag löse.

              Ein Elternelement mit mehreren Kindelementen ;) wie die Elemente heissen ist egal.

              Also nutze jQuery jetzt, jedoch ist das bei mir etwas fehlerhaft. Ich habe die 4 Elemente welche genau 128px hoch sind. Diese sind direkt untereinander. Wenn ich diese jetzt verschiebe kommt es oft vor das ein leerer raum von 128px entsteht und das verschobene Element alles nach "unten" drückt und die Gesamtliste verlängert.

              Eine Idee was das sein könnte ?

              1. Also nutze jQuery jetzt, jedoch ist das bei mir etwas fehlerhaft. Ich habe die 4 Elemente welche genau 128px hoch sind. Diese sind direkt untereinander. Wenn ich diese jetzt verschiebe kommt es oft vor das ein leerer raum von 128px entsteht und das verschobene Element alles nach "unten" drückt und die Gesamtliste verlängert.

                Eine Idee was das sein könnte ?

                Aufgrund deiner Beschreibung nicht - aber was mir allgemein schon aufgefallen ist: bei mehr als 3 Animationen gleichzeitig mittels addClass() oder removeClass() hat der Internet Explorer einschließlich Version 8 ab und zu Schwierigkeiten und verweigert die Animation weiterer Elemente.

                Umgehen lässt sich das, wenn man manuell mit animate() arbeitet.

                1. Also nutze jQuery jetzt, jedoch ist das bei mir etwas fehlerhaft. Ich habe die 4 Elemente welche genau 128px hoch sind. Diese sind direkt untereinander. Wenn ich diese jetzt verschiebe kommt es oft vor das ein leerer raum von 128px entsteht und das verschobene Element alles nach "unten" drückt und die Gesamtliste verlängert.

                  Eine Idee was das sein könnte ?

                  So ... hab jetzt mal die Datei hoch geladen. Dort fällt dann schon auf das man z.b. auch einer der beiden Blöcke über die Begrenzung hinaus ziehen kann.
                  Oder mal der untere Block nicht mehr zu ziehen geht wenn man versucht mehrfach von "unten nach oben" zu ziehen.

                  http://www.mrspoocy.com/selfhtml/overview.html

                  Was später hinzukommen soll, ist dann auch eine Gruppe B, welche auch in sich zu verschieben geht. Aber man soll NICHT von B nach A schieben können (oder umgekehrt). Jedoch soll man die ganze Gruppe tauschen können. Also das Gruppe B dann oben steht.
                  Das ganze geht natürlich mit jeweiligen gruppen class, jedoch ist es dann nicht mehr dynamisch das man beliebig viele neue Gruppen hinzufügen kann.

                  1. http://www.mrspoocy.com/selfhtml/overview.html

                    Ich kanns nachvollziehen - aber seh' auf die schnelle nicht warum.

                    Minimiere dein Vorhaben mal auf folgendes:

                    <div id="foo">
                      <div>foo</div>
                      <div>bar</div>
                    </div>

                    Und bau dann so lange dazu, bis der Fehler auftritt ;)

        2. Da gibt es ja rechts immer noch mehr Beispiele zu den Demos :)
          Also Sortable - Portlets könnte das sein was ich suche.