verschieben von Inhalten zwischen 2 Select Boxen

A

Antispy

Mitglied
Hallo Zusammen :)

ich habe eine Idee etwas in meinem Projekt einzubauen. Leider jedoch bin ich kein Javascript Experte und bräuchte hierfür ein paar gute Tips von Euch :)

Folgendes Szenario:
Ich möchte 2 Selectboxen haben, welche mit mehreren Inhalten gefüllt sind. Die Selectboxen sollen auch aus mehreren Rows bestehen.
Nun möchte ich gerne mit Javascript umsetzen, dass ich mit der Maus mit linksklick auf einen Wert in der linken Box klicken kann, die Maus gedrückt halte und den Wert in die rechte Box ziehe. Der Wert soll dann aus der linken Box verschwinden und in der rechten Box an der Stelle auftauchen, wo ich das ausgewählte Objekt hingezogen habe.

Ich hoffe, dass es so einigermaßen verständlich ist. Ansonsten fragt gerne nach :)

Vielen lieben Dank schonmal für Eure nette Hilfe!

Lieben Gruß,
Antispy
 
Hi,

bei den gewöhnlichen Selectboxen wird dein Vorhaben kaum umzusetzen sein, da hierfür die einzelnen Optionen mit Events (onmousedown) versehen werden müssten. Das ist browserübergreifend nicht möglich.

Eine Variante wären sortable lists, wie sie im jquery.ui bereits enthalten sind. Diese Listen könntest du derart formatieren, dass sie auf einen Klick aus- bzw. eingeklappt werden.
Weiterhin könnten diese Listen miteinander verbunden werden (Option connectWith), so dass ein Verschieben der enthaltenen Elemente untereinander ermöglicht ist.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }

#sort_01, #sort_02{
  height: 24px;
  margin-left: 12px;
  overflow: hidden;
  float: left;
  width: 200px;
  border: 1px solid #aaa;
  background: #fff url(updown.gif) 100% 0 no-repeat;
}
 //-->
</style>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.sortable.js"></script>

<script type="text/javascript">
  <!--
$(function() {
  // Präfix für sortierbare Listen
  var strSortablePre = "sortable";

  $("#"+strSortablePre+"1, #"+strSortablePre+"2").sortable({
    connectWith: '.connectedSortable'
  }).disableSelection();

  $('#sort_01, #sort_02').toggle(
    function(){
      if(typeof this.theHeight == "undefined")
        this.theHeight = ($(this).css('height')=="auto")? $(this).height() : parseInt($(this).css('height'));

      $(this).animate({'height': $('#'+strSortablePre+parseInt(this.id.split("_")[1])).height()+"px"}, 'slow');
    },
    function(){
      $(this).animate({'height': this.theHeight+"px"}, 'slow');
    }
  );
});
 //-->
</script>
</head>
<body>
<div id="sort_01">
	<ul id="sortable1" class="connectedSortable">
	  <li class="ui-state-default">Item 1.1</li>
	  <li class="ui-state-default">Item 1.2</li>
	  <li class="ui-state-default">Item 1.3</li>
	  <li class="ui-state-default">Item 1.4</li>
	  <li class="ui-state-default">Item 1.5</li>
	</ul>
</div>

<div id="sort_02">
	<ul id="sortable2" class="connectedSortable">
	  <li class="ui-state-highlight">Item 2.1</li>
	  <li class="ui-state-highlight">Item 2.2</li>
	  <li class="ui-state-highlight">Item 2.3</li>
	  <li class="ui-state-highlight">Item 2.4</li>
	  <li class="ui-state-highlight">Item 2.5</li>
	</ul>
</div>
</body>
</html>

Das Ganze als Onlinebeispiel: http://playground.quaese.de/tutorials/sortable_selects/

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück