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:
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:
<!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>
Zuletzt bearbeitet:
