JavaScript jQuery Sortable letzte Element

DadyCool

Well-known member
ID: 81813
L
30 April 2006
601
19
Hallo,

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

Hier geht es:
PHP:
<div class="navi">
   <ul>
        <li id="test_1">test</li>
   </ul>
</div>

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


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

JavaScript:

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

Jemand eine Idee?

Danke schonmal :)

Gruß
DadyCool
 
Zuletzt bearbeitet:

DadyCool

Well-known member
ID: 81813
L
30 April 2006
601
19
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

Well-known member
ID: 81813
L
30 April 2006
601
19
Habe es so gelöst:

PHP:
$(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

Woohooo!
ID: 211634
L
20 April 2006
4.489
473
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)
 

tobomator

Well-known member
ID: 129556
L
28 Februar 2010
575
23
Danke für den link, ich werde mich auch mal mit dem Thema ein wenig beschäftigen. Weiterbildung kann ja nie schaden.
 

DadyCool

Well-known member
ID: 81813
L
30 April 2006
601
19
habs nun so gelöst:

PHP:
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

Well-known member
ID: 296438
L
4 September 2007
529
61
RTFM :)

PHP:
$('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

Well-known member
ID: 81813
L
30 April 2006
601
19
@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)

PHP:
$(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:
PHP:
1,3,2

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

PHP:
1,3,
PHP:
1,
usw..

er schneidet immer wieder eine ID ab. :ugly:

Jemand eine Idee?

Gruß
DadyCool
 
Zuletzt bearbeitet: