✔ Position eines Elements in einem Listenfeld bestimmen.

[visiondpc]

Hallo,
gibt es eine Möglichkeit die Position eines Elementes in einem Listenfeld zu bestimmen?
Ich würde die Optionen gern via Drag&Drop umsortieren können und muss dafür irgendwie bestimmen über dem wievielten Array ich mich grade befinde.
Bei SelfHTML bin ich leider nicht wirklich schlau geworden.

Danke schon mal im Voraus.

 

[Sven Mintel]

Moin,

da eine Option ja in dem Moment, wo du sie auswählst zum Draggen, auch selektiert wird, sollte dir die Eigenschaft selectedIndex des dazugehörigen <select> die nötige Info geben.

 

[visiondpc]

Das ist richtig, ich muss doch aber auch die Position bestimmen wo die Option eingefügt werden soll.

 

[Sven Mintel]

Wie sieht denn eigentlich generell dein Ansatz zum Bewegen der <option>s aus?

Drag+Drop funktioniert ja idR. , indem man die top(oder left)-Positionswerte eines Seitenelementes ändert, ich glaube aber nicht, dass dies bei Optionen unbedingt so in allen Browsern funktioniert :-(

Um ehrlich zu sein, habe ich noch nie Drag+Drop-Optionen gesehen, und da ich schon ne Menge gesehen habe, würde ich fast meinen, man kann diese nicht Draggen & Droppen.(browserübergreifend)

 

[visiondpc]

Naja ich hab es glaube ich etwas/viel primitiver versucht.

var oldText = '';
oldValue = '';
document.onmousedown=function(e)
{
  o=(window.event)?window.event.srcElement:e.target;
  if(o.tagName=='OPTION')
  {
	ob = document.getElementById('liste').options[document.getElementById('liste').options.selectedIndex];
  	oldText = ob.text;
	oldValue = ob.value;
	//alert(document.getElementById('liste').options.length);
	document.getElementById('liste').options[document.getElementById('liste').options.selectedIndex] = null;
  }
	
}

document.onmouseup=function(e)
{
  o=(window.event)?window.event.srcElement:e.target;
  if(o.tagName=='OPTION')
  {
  	if(oldText && oldValue)
	{
		for(i=(document.getElementById('liste').options.length-1);i>=document.getElementById('liste').options[document.getElementById('liste').options.selectedIndex];i--)
		{
			ob2 = document.getElementById('liste').options[i];
			neu2 = new Option(ob2.text, ob2.value, false, true);
			document.getElementById('liste').options[(i+1)] = neu2;
		}
		neu = new Option(oldText, oldValue, false, true);
		document.getElementById('liste').options[document.getElementById('liste').options.selectedIndex] = neu;
	}
  }
	
}

Onmousedown werden Text un Value zwischengespeichert und das Element ausgeblendet. Onmouseup dann an der aktuellen Position eingefügt und alle nachfolgenden sollen um eins hochgezählt werden. Klappt im FF auch schon fast.
Ich hab aber grade festgestellt, dass der IE bei Optionen sowieso keine Eventhandler akzeptiert. Insofern ist die ganze Aktion für die Katz fürchte ich.

 

[Sven Mintel]

Ich hab aber grade festgestellt, dass der IE bei Optionen sowieso keine Eventhandler akzeptiert. Insofern ist die ganze Aktion für die Katz fürchte ich.

Befürchte ich irgendwie auch

Wie wäre es, wenn du statt echter <option>'s bspw. eine sortierbare Liste nimmst....wenn du fertig bist, machst du dann aus der Liste ein <select>

 

[visiondpc]

Danke, das ist natürlich eine gute Idee. Zumal die Selectbox auch nicht zum auswählen sondern wirklich nur zum sortieren zweckentfremdet werden sollte (war halt ne Vorlage vom Mediengestalter).
Ich denke mal, das ich mit einem div und einer Liste auch eine ganz gute Selectbox hinkriege.
Danke für die Hilfe.