tutorials.de Buch-Aktion 05/2012
Like Tree2Danke
  • 2 Beitrag von Quaese
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
757
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 04.03.11 11:26 #1
    Lefti1 Lefti1 ist offline Rookie
    Registriert seit
    Mar 2011
    Beiträge
    5
    Hallo,

    ich möchte für ein Fussball-Game eine Aufstellung per Drag&Drop realisieren.

    Ich hab im Web schon was gefunden, welches ich schon entsprechend angepasst habe.
    Das Verschieben eines Spielers in die vorgegebene Position funktioniert soweit ganz gut. Auch das Austauschen eines Spielers funktioniert.

    Was jedoch nicht sehr schön ist:
    Wenn ich beim Austauschen einen Spieler aus der Liste nehme und über die Position bewege, dann vergrößert sich der Rahmen bzw. verschiebt sich der vorhandene Spieler nach unten.

    Was mache ich falsch?

    Der vorhande Spieler soll beim Loslassen der Maus nur ersetzt werden.
    Wie jetzt schon

    Hier der Quelltext dazu:

    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
73
74
75
76
77
78
79
80
81

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery - UI - Beispiel zu: sortable, draggable, droppable</title>
<style type="text/css">
 
 
#trash_id{
    width__: 180px;
  height: 100px;
  background: url(bilder/trash.png) 50% 0 no-repeat;
  border: #ccc;
}
 
 
 //-->
</style>
<script src="jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script language="javascript">
<!--
$(function(){
    
 
  // Listen sortierbar machen und miteinander verbinden
  $('.sort_list').sortable({
    connectWith: '.sort_list',
    receive: function(evt, ui){
      if($(this).parents('#spieler_liste').length>0){
        ui.item.find('div').unbind('click');
        ui.item.find('span').remove();
      }
    },
    update: function(event, ui)
    {
        // Bei jeder Änderung
        
       }     
  });
});
-->
</script>
</head>
<body>
<h1>jQuery - UI</h1>
 
        
 
<ul id="spieler_liste">
    <li class="cl_head_li">TEAM</li>
    <li id="team_id">
    <ul class="sort_list">
        <li class="cl_tw"><div id="sp_01">Torwart 1</div></li>
        <li class="cl_tw"><div id="sp_02">Torwart 2</div></li>
        
        <li class="cl_aw"><div id="sp_03">Abwehr 1</div></li>
        <li class="cl_aw"><div id="sp_04">Abwehr 2</div></li>
        <li class="cl_aw"><div id="sp_05">Abwehr 3</div></li>
        <li class="cl_aw"><div id="sp_06">Abwehr 4</div></li>
        <li class="cl_aw"><div id="sp_07">Abwehr 5</div></li>
        <li class="cl_aw"><div id="sp_08">Abwehr 6</div></li>
 
        <li class="cl_mf"><div id="sp_09">Mittelfeld 1</div></li>
      <li class="cl_mf"><div id="sp_10">Mittelfeld 2</div></li>
      <li class="cl_mf"><div id="sp_11">Mittelfeld 3</div></li>
      <li class="cl_mf"><div id="sp_12">Mittelfeld 4</div></li>
      <li class="cl_mf"><div id="sp_13">Mittelfeld 5</div></li>
      <li class="cl_mf"><div id="sp_14">Mittelfeld 6</div></li>
      <li class="cl_mf"><div id="sp_15">Mittelfeld 7</div></li>
 
        <li class="cl_st"><div id="sp_16">Sturm 1</div></li>
      <li class="cl_st"><div id="sp_17">Sturm 2</div></li>
      <li class="cl_st"><div id="sp_18">Sturm 3</div></li>
      <li class="cl_st"><div id="sp_19">Sturm 4</div></li>
      <li class="cl_st"><div id="sp_20">Sturm 5</div></li>
    </ul>
  </li>
</ul>
</body>
</html>
    Geändert von Lefti1 (05.03.11 um 13:50 Uhr)
     
    Zitieren Zitieren
  2. 04.03.11 16:53 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    definiere eine CSS-Klasse, die den Placeholder versteckt:
    Code :
    1
2
3

    .myPlaceHolderClass{
  display: none;
}
    Beim Initialisieren der sortierbaren Liste weist du der placeholder-Eigenschaft diesen Klassenname zu:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

      // Listen sortierbar machen und miteinander verbinden
  $('.sort_list').sortable({
    connectWith: '.sort_list',
    placeholder: 'myPlaceHolderClass',  // Placeholder-Klasse zuweisen
    receive: function(evt, ui){
      if($(this).parents('#spieler_liste').length>0){
        ui.item.find('div').unbind('click');
        ui.item.find('span').remove();
      }
    },
    update: function(event, ui){
      // Bei jeder Änderung
    }
  });
    Ciao
    Quaese
    tobee und Lefti1 bedanken sich. 
    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. 05.03.11 12:00 #3
    Lefti1 Lefti1 ist offline Rookie
    Registriert seit
    Mar 2011
    Beiträge
    5
    Hi,

    Super, genau das wars.

    Danke Quaese.
     
    Zitieren Zitieren
« Problem mit Firefox und <video>-Events | Suchfeld: Anzeige der bisherigen Suchergebnisse unterdrücken »

Ähnliche Themen

  1. JQuery Listen sortieren/Drag/Drop?
    Von bernd00 im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 12.10.10, 17:23
  2. [jQuery] Drag and Drop
    Von newwarrior im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 25.06.10, 11:56
  3. [jQuery] Drag & Drop & Img & Divs
    Von newwarrior im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 09.03.10, 23:40
  4. [jQuery] Drag and drop & event.pageY
    Von tobee im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 16.01.10, 22:07
  5. Online Fussball Manager Spielplan, Aufstellung
    Von momoxp im Forum PHP
    Antworten: 6
    Letzter Beitrag: 25.01.05, 20:16

Stichworte