Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

HTML5 Sortable

Frage Entwicklung Webentwicklung

Mitglied: Badger

Badger (Level 2) - Jetzt verbinden

12.02.2014, aktualisiert 19.02.2014, 2090 Aufrufe, 6 Kommentare, 3 Danke

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

Grüße
Patrick
Mitglied: EvilMoe
13.02.2014 um 07:33 Uhr
Hallo,

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

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?
Bitte warten ..
Mitglied: colinardo
13.02.2014, aktualisiert um 09:59 Uhr
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
01.
  <ul class="sortlist"> 
02.
    <li>Test 1</li> 
03.
    <li>Test 2</li> 
04.
    <li>Test 3</li> 
05.
    <li>Test 4</li> 
06.
    <li>Test 5</li> 
07.
    <li>Test 6</li> 
08.
  </ul>
Javascript-Schnippsel:
01.
<script type="text/javascript"> 
02.
   $(".sortlist li").slice(3).remove(); 
03.
</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
01.
<!doctype html> 
02.
<html> 
03.
<head> 
04.
<meta charset="utf-8"> 
05.
<title>Demo</title> 
06.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
07.
<script src="jquery.sortable.js"></script> 
08.
<script> 
09.
$(document).ready(function(){ 
10.
	$(".sortlist li").slice(3).remove(); 
11.
	$(".sortlist").sortable().bind('sortupdate',function(){ 
12.
			$(".sortlist li").each(function(index){ 
13.
				alert("Listindex " + index + " hat den Wert : " + $(this).text()); 
14.
			}); 
15.
		}); 
16.
}); 
17.
</script> 
18.
</head> 
19.
 
20.
<body> 
21.
<div> 
22.
  <ul class="sortlist"> 
23.
    <li>Test 1</li> 
24.
    <li>Test 5</li> 
25.
    <li>Test 2</li> 
26.
    <li>Test 3</li> 
27.
    <li>Test 4</li> 
28.
    <li>Test 6</li> 
29.
  </ul> 
30.
</div> 
31.
</body> 
32.
</html>
Zum speichern kannst du die Liste ja mit jQuery in eine Variable schreiben:
var meineliste = $('.sortlist');
Grüße Uwe
Bitte warten ..
Mitglied: Badger
13.02.2014 um 09:42 Uhr
Danke euch!.
Werde mir das ganze anschauen und dann sagen, ob ich so zu meinem Erfolg komme!
Bitte warten ..
Mitglied: Badger
18.02.2014 um 22:33 Uhr
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 - Klicke auf das Bild, um es zu vergrößern

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 - Klicke auf das Bild, um es zu vergrößern

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
Bitte warten ..
Mitglied: colinardo
LÖSUNG 18.02.2014, aktualisiert 19.02.2014
Dann ist das eine Lösung:
http://jsfiddle.net/5RjV5/26/

Grüße Uwe
Bitte warten ..
Mitglied: Badger
19.02.2014 um 08:04 Uhr
Herzlichen Dank dir!
Damit komme ich sicher weiter!

Grüße
Patrick
Bitte warten ..
Ähnliche Inhalte
Entwicklung
JQuery sortable mit unterschiedlichen Größen
Frage von dni800Entwicklung8 Kommentare

Hallo, ich bin gerade dabei einen kleinen Web-Konfigurator zu bauen und nutze dazu jQuery (sortable): Nun versuche ich den ...

Vmware
Unterschied zwischen integrierten HTML5 Client in Vcenter 6.5 und der HTML5 Webclient Appliance
Frage von askandoVmware

Kann mir jemand sagen was gerade der Unterschied zwischen den beiden HTML5 Clients ist? Wenn ich einen Vcenter 6.5 ...

HTML
HTML5 und PHP Datenverarbeitung
Frage von 94451HTML8 Kommentare

Hier mal ne Grundsätzliche Frage: ich möchte gerne ein tool bauen mit dem ich (SQL) Tabellen lesen und Bearbeiten ...

Audio
HTML5 Ton nicht zuverlässig
Frage von blue0711Audio

Hallo, ich habe an einem Samsung-Laptop mit W7-64 im IE das Problem, dass HTML5-Videos zunächst keinen Ton bringen. Das ...

Neue Wissensbeiträge
Microsoft Office

Office 2010 Starter erneut auf einer frischen Windows-Version installieren

Tipp von Lochkartenstanzer vor 14 StundenMicrosoft Office2 Kommentare

Moin, vor ein paar Tagen schlug bei mir ein Kunde auf, der sein Widnows 7 geschrottet und es inklusive ...

Datenbanken

Upgrade MongoDB 3.4 auf 3.6

Erfahrungsbericht von Frank vor 16 StundenDatenbanken

Seit kurzem gibt es das 3.6 Update für die MongoDB: Sicherheit, das Sortieren, Aggregation und auch die Performance wurde ...

SAN, NAS, DAS

Backdoor Zugang und Upload-Bug in vielen Western Digital MyCloud Geräten

Information von Frank vor 17 StundenSAN, NAS, DAS2 Kommentare

James Bercegay von der Firma Gulftech hat die Fehler an Western Digital gemeldet und das Unternehmen stellt bereits ein ...

Microsoft Office

Outlook 2016 - Beim Weiterleiten keine PDF Anhänge mehr - KB4011626 entfernen

Erfahrungsbericht von Deepsys vor 20 StundenMicrosoft Office1 Kommentar

Wenn ihr feststellt das ihr beim Weiterleiten von E-Mails keine PDF Anhänge mehr versendent, dann dankt Microsoft. Diese tolle ...

Heiß diskutierte Inhalte
Windows Netzwerk
Drucker isolieren in Windows Domäne
gelöst Frage von lcer00Windows Netzwerk14 Kommentare

Hallo zusammen, habe eine Windows-AD (2012R2) in der es einen Druckerserver gibt. Mittlerweile verliere ich das Vertrauen in die ...

Server-Hardware
Veeam Backup Server stürzt alle paar Tage ab
Frage von Leo-leServer-Hardware12 Kommentare

Hallo Forum, ich habe momentan folgendes Problem. Veeam Backup and Replication 9.5 u2 auf voll gepatchten DL 380 G7 ...

Windows 10
Win10 Laptop findet keine Netzwerkgeräte und Freigaben mehr
Frage von CoolzeroWindows 1010 Kommentare

Hi, seit ein paar Tagen habe ich das Problem das mein Windows 10 Laptop keine Geräte mehr in der ...

Batch & Shell
Dateien verschieben mit batch
gelöst Frage von michi-ffmBatch & Shell10 Kommentare

Hallo Zusammen hat jemand evtl eine Idee? Zunächst hier das Skript: Leider werden keine UNC-Pfade unterstüzt, kann mir jemand ...