JavaScript jQuery Sortable letzte Element

[DadyCool]

Hallo,

ich nochmal Wenn möchte gerne eine Liste mit input elementen per sortable DragAndDrop fähig machen.

Hier geht es:

<div class="navi">
   <ul>
        <li id="test_1">test</li>
   </ul>
</div>

Sobald ich das Inputfeld hinzufüge geht es nicht mehr.

<div class="navi">
   <ul>
        <li id="test_1">
                 <input type="submit" name="startPage:panelID.1" value="NeuerTab2" class="inactive"  />
        </li>
   </ul>
</div>

JavaScript:

 $(".navi ul").sortable({
       cursor: 'move',
       opacity: 1.0,
});

Jemand eine Idee?

Danke schonmal

Gruß
DadyCool

 

[chrissel]

Soll das nach dem Inhalt der Input-Feldern sortiert werden?

 

[DadyCool]

Das Input Feld soll per Drag and Drop verschoben werden können. Die Inputfelder sind nämlich Tabs. Die sollen ähnlich wie Firefox Tabs verschoben werden können.

gruß
DadyCool

 

[DadyCool]

Habe es so gelöst:

$(document).ready(function() {
	 $(".mikronavi_submit ul").sortable({
			connectWith: '.mikronavi_submit ul', 
			cursor: 'move',
			items: 'input',
			cancel: null,
			axis: 'x',
			opacity: 1.0,
			stop: update
		}); 
});

function update() {
	var serial = $('.mikronavi_submit ul').sortable('serialize');
	alert(serial);
};

Leider kann ich die Liste nicht serialisieren. Das Alert gibt null aus

Jemand eine Idee?

Gruß
DadyCool

 

[chrissel]

Mhh... also du nimmst Submit-Buttons wodurch per Klick ein bestimmter Tab geöffnet wird?
Ich glaube dabei haben die Submit-Buttons ihr Ziel verfehlt. Wenn du wirklich den Buttonstyle haben willst, gibt es auch noch <button> wenn ich mich nicht ganz täusche. Sollte aus Sicht der Semantik glaube ich ein wenig logischer sein.... So als kleine Anmerkung


Welches Plugin benutzt du für "sortable"? Das aus dem jQuery UI? (klick)

 

[DadyCool]

Welches Plugin benutzt du für "sortable"? Das aus dem jQuery UI? (klick)


genau

Gruß
DadyCool

 

[tobomator]

Danke für den link, ich werde mich auch mal mit dem Thema ein wenig beschäftigen. Weiterbildung kann ja nie schaden.

 

[DadyCool]

habs nun so gelöst:

function update() {
	var serial = $('.mikronavi_submit ul li');
	var serializeData = '';
	jQuery.each(serial, function() {
		var child = $(this).children() 
		child.each(function() {
			var inputFeld = $(this);
			var data = inputFeld.attr('id').split('_');
			if (data != '') { 
				serializeData += data[1] + ",";
			}
		});
	});
};

Habe aber nun eine andere Frage.

Ist es möglich das, dass letzte Element nicht verschoben werden kann? Also das letzte Element soll immer das letzte Element bleiben.

Gruß
DadyCool

 

[paddya]

RTFM

$('selector').sortable().bind('sortstart', function(e, ui) {
    if($(ui.item).is(':last-child'))
        $(this).sortable('cancel');
});

Habs jetzt nicht getestet, sollte aber in die richtige Richtung gehen.

 

[DadyCool]

@paddya
leider funktiniert das nicht.


Es ist zum verrückt werden ;(

so habe ich es nun hinbekommen, dass das letzte Element immer an der letzten Stelle bleibt. (nicht schön, weiß aber im moment nicht weiter)

$(document).ready(function() {
	var lastChild = null;
							
	$(".mikronavi_submit ul").sortable({
			connectWith: '.mikronavi_submit ul', 
			cursor: 'move',
			items: 'input',
			cancel: null,
			opacity: 1.0,
			axis: 'x',
			stop: update
	});

	function update() {
		var serial = $('.mikronavi_submit ul');
		var serializeData = '';
		var lastElement = null;
		var child = null;
		// letzte Element löschen (REgisterkartenverwaltung)
		jQuery.each(serial, function() {
			child = $(this).children();
			child.each(function() {
				var nextChild = $(this).children();
				nextChild.each(function() {	
					var inputFeld = $(this);
					if (inputFeld.val() == "+") {	
						lastChild = inputFeld;
						$(this).remove();
						serial.sortable('refresh');
					}
				});
			});
		});

		// Restliche Elemente serialisieren
		jQuery.each(serial, function() {
			child = $(this).children();
			child.each(function() {
				var nextChild = $(this).children();
				nextChild.each(function() {	
					var inputFeld = $(this);
					var data = inputFeld.attr('id').split('_');
					if (data != '') { 
						serializeData += data[1] + ",";
					}
				});
			});
		});
		
		// Registerkartenverwaltung wieder hinzufügen
		serial.append(lastChild);
		serial.sortable('refresh');
		alert(serializeData);

		// sortorder speichern
		/*$.ajax({
			url: "portalAjaxRequestForTab.faces",
			type: "POST",
			data: ({ data:serializeData })
		}); */			
	};
});

Wenn ich die Elemente vor dem letzten Element hin und her verschiebe, geht es ohne Probleme. Es wird mir ein String generiert der die Element ID beinhaltet (ohne das letzte Element)

Beispiel:

1,3,2

Nur wenn ich ein Element über das letzte Element verschiebe, wird der String nicht mehr richtig erstellt.

1,3,

1,

usw..

er schneidet immer wieder eine ID ab.

Jemand eine Idee?

Gruß
DadyCool