badger
Goto Top

HTML5 Sortable

Hallo Leute,

ich bin auf der Suche nach einer Funktion, Elemente im Web zu sortieren. Am besten würde mir hierfür html5 gefallen.

Habe dazu auch dieses super Plugin gefunden, das prinzipiell für meine Sachen durchaus passend ist.

Jedoch habe ich ein paar Fragen, wo ich hoffe, dass ihr mir weiterhelfen könnt.

Prinzipiell geht es mir um die Connected Sortable Lists.

1) Gibt es eine Möglichkeit, hier eine maximale Anzahl an Elementen pro Liste festzulegen?
2) welches ist die einfache Methode, um die Reihenfolge abzufragen und zu speichern?

Wäre für eure Antworten dankbar. Bzw. auch die Antwort, wenn ich mit diesem Plugin auf dem Holzweg bin und ich mir um was anderes umschauen muss face-smile

Grüße
Patrick

Content-Key: 229554

Url: https://administrator.de/contentid/229554

Printed on: April 21, 2024 at 01:04 o'clock

Member: EvilMoe
EvilMoe Feb 13, 2014 at 06:33:28 (UTC)
Goto Top
Hallo,

2) welches ist die einfache Methode, um die Reihenfolge abzufragen und zu speichern?
Steht doch auf der Seite.
yepnope({
    test: Modernizr.draganddrop,
    yep: 'jquery.sortable.js',  
    nope: 'jquery-ui.min.js',  
    complete: function() {
        $('.sortable').sortable().bind('sortupdate', function() {  
            //Store the new order.
        }
    }
});


1) Gibt es eine Möglichkeit, hier eine maximale Anzahl an Elementen pro Liste festzulegen?
Macht das nicht deine Datenbank? Oder woher kommen die Werte?
Member: colinardo
colinardo Feb 13, 2014 updated at 08:59:25 (UTC)
Goto Top
Hallo Patrick,
Zitat von @Badger:
1) Gibt es eine Möglichkeit, hier eine maximale Anzahl an Elementen pro Liste festzulegen?
dafür gibt es in jQuery die Funktion slice().
Beispiel mit dem nur die ersten 3 Elemente der Liste ausgegeben werden (bzw alles was hinter Index 3 kommt entfernt wird):
Der Index ist 0 basierend

HTML-Schnippsel
  <ul class="sortlist">  
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
  </ul>
Javascript-Schnippsel:
<script type="text/javascript">  
   $(".sortlist li").slice(3).remove();  
</script>
Ausgabe

  • Test 1
  • Test 2
  • Test 3

Besser ist es natürlich immer wenn du die Anzahl der Elemente im Vorhinein begrenzt und sortierst (SQL) wenn das in deinem Projekt möglich ist.
2) welches ist die einfache Methode, um die Reihenfolge abzufragen und zu speichern?
Noch ein Beispiel mit der Abfrage der Listenelemente:
Nach jedem verschieben eines Elements wird die Reihenfolge ausgegeben
<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
<script src="jquery.sortable.js"></script>  
<script>
$(document).ready(function(){
	$(".sortlist li").slice(3).remove();  
	$(".sortlist").sortable().bind('sortupdate',function(){  
			$(".sortlist li").each(function(index){  
				alert("Listindex " + index + " hat den Wert : " + $(this).text());  
			});
		});
});
</script>
</head>

<body>
<div>
  <ul class="sortlist">  
    <li>Test 1</li>
    <li>Test 5</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 6</li>
  </ul>
</div>
</body>
</html>
Zum speichern kannst du die Liste ja mit jQuery in eine Variable schreiben:
var meineliste = $('.sortlist');

Grüße Uwe
Member: Badger
Badger Feb 13, 2014 at 08:42:41 (UTC)
Goto Top
Danke euch!.
Werde mir das ganze anschauen und dann sagen, ob ich so zu meinem Erfolg komme! face-smile
Member: Badger
Badger Feb 18, 2014 at 21:33:26 (UTC)
Goto Top
Hallo!

Ich habe mich jetzt einige Zeit mit dem sortieren und dem slice gespielt. Habe auch schon einige Fortschritte gemacht. Allerdings ganz bekomme ich das noch nicht hin, was ich möchte.
Vlt. jetzt mal zur Erklärung, auf was ich aus bin:

3ea2663b5cafea57471bd9e21a1a7a1f

Das ganze soll ca. so ausschauen: Es kann x Bereiche geben. Jeder Bereich darf aber maximal 6 Zeilen beinhalten. Dies soll auch den Benutzer so grafisch dargestellt werden.
Und wenn jetzt z.b. der Benutzer die Zeile 3.3 an die Stelle von 1.3 verschiebt, soll der Rest nach unten rücken.

2456f0f4be4092caceb9d5e93370a7de

Hat hier wer einen Tipp, wie man das realisieren könnte?
(Nur das mich ja keiner falsch versteht: Ich will hier auf gar keinen Fall einen fertigen Code erbetteln. Ich will das ganze gerne lernen - stehe aber da gerade total an!)

Grüße
Patrick
Member: colinardo
Solution colinardo Feb 18, 2014, updated at Feb 19, 2014 at 07:04:20 (UTC)
Goto Top
Dann ist das eine Lösung:
http://jsfiddle.net/5RjV5/26/

Grüße Uwe
Member: Badger
Badger Feb 19, 2014 at 07:04:52 (UTC)
Goto Top
Herzlichen Dank dir!
Damit komme ich sicher weiter!

Grüße
Patrick