tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
1250
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 23.07.09 20:24 #1
    Antispy Antispy ist offline Mitglied Silber
    Registriert seit
    Jun 2004
    Beiträge
    96
    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
     
    The falling umbrella springer jumps me nothing you nothing into the clock wood ;)

    Visit us http://www.phpkitcenter.de
    Bei uns gibt es Hacks, Designs und weiteres Zubehör für das Phpkit
    Zitieren Zitieren
  2. 24.07.09 11:07 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

    <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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  3. 27.08.10 11:51 #3
    mabrahamde mabrahamde ist offline Grünschnabel
    Registriert seit
    Aug 2010
    Beiträge
    3
    Hallo,

    in meinem Blog habe ich einen Artikel zu diesem Thema veröffentlicht. Ich habe eine einfache, kompakte Lösung mit jQuery realisiert. Der Artikel ist unter http://mabraham.de/jquery-select-opt...s-verschieben/ erreichbar.

    Martin
     
    Zitieren Zitieren
« jQuery: DIV aus DOM löschen | Drag und Drop Dynamisch zufügen und Position bestimmen »

Ähnliche Themen

  1. Boxen verschieben sich nach unten im IE6
    Von hinkel11 im Forum HTML & XHTML
    Antworten: 6
    Letzter Beitrag: 14.09.09, 17:26
  2. Unschöner Abstand zwischen den Boxen
    Von KlyX im Forum CSS
    Antworten: 2
    Letzter Beitrag: 29.05.09, 13:00
  3. [CSS] Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?
    Von Maik im Forum Webmaster FAQ
    Antworten: 0
    Letzter Beitrag: 19.04.08, 08:57
  4. Ebene boxen nebeneinander verschieben sich
    Von afterwhoru im Forum CSS
    Antworten: 0
    Letzter Beitrag: 06.11.07, 10:42
  5. Übergabe von Select- Boxen an PHP
    Von perryrhodans im Forum PHP
    Antworten: 3
    Letzter Beitrag: 15.06.04, 15:15