08/10/2008, 05:10
|
| | | Fecha de Ingreso: abril-2007
Mensajes: 114
Antigüedad: 17 años Puntos: 2 | |
| Drag n Drop con scriptaculous
Hola. Estoy iniciándome en el javascript, y me ha surgido un problema con el "Drag and Drop" (Pincha y Arrastra) de scriptaculous.
El problema es el siguiente. Tengo una lista de "divs" que corresponden a jugadores, y el objetivo es arrastrarlos a las posiciones de un gráfico de un campo de balonmano. Estas posiciones están determinadas por divs situados dentro del gráfico (que es otro div).
Todo funciona a la perfección, el caso es que estoy intentando que solo se puedan arrastrar jugadores a posiciones vacías, es decir, si ya hay un jugador en el div de esa posición, que no deje meter más.
No sé si me he explicado bien, de ser así avisadme y explico de nuevo el problema. A continuación os dejo el código que estoy usando.
Código:
<!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>Drag Drop con script.aculo.us - RibosoMatic.com</title>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<style>
.jugador
{
border: solid 1px grey;
font-family: Verdana, Tahoma, Arial;
background-color: #DDDDDD;
padding: 5px;
font-size: 11px;
}
#jugadores{
background-color:#FFFFCC;
margin:5px;
}
#grupo2{
background-color:#E4ECF3;
margin:5px;
}
#sinequipo{
background-color:#EEEEEE;
margin:5px;
}
h3{
background-color:#4B6186;
color:#FFFFFF;
}
.posicion
{
border: dotted 1px grey;
height: 30px;
}
.fila
{
height:30px;
}
</style>
</head>
<body>
<h4>Arrastra</h4>
<div id="pagina" style="height: 500px; border: solid 1px grey">
<div id="jugadores" class="seccion" style="float:left;width:80px;">
<h3 class="arrastrar">Equipo1</h3>
<div class="jugador">David</div>
<div class="jugador">Aitor</div>
<div class="jugador">Seijas</div>
<div class="jugador">Andrés</div>
<div class="jugador">Rial</div>
<div class="jugador">Bangueses</div>
<div class="jugador">Pablo</div>
</div>
<center>
<div style="float:left; width: 500px; height: 500px; border: solid 1px grey;">
<div class="fila"></div>
<div id="EI" class="posicion" style="float:left;width:80px;">
</div>
<div id="ED" class="posicion" style="float:right;width:80px;">
</div>
<div class="fila"></div>
<div id="PI" class="posicion" style="width:80px;">
</div>
<div class="fila"></div>
<div id="LI" class="posicion" style="float:left;width:80px;">
</div>
<div id="LD" class="posicion" style="float:right;width:80px;">
</div>
<div class="fila"></div>
<div id="CE" class="posicion" style="width:80px;">
</div>
</div></center>
</div>
<script type="text/javascript">
// <![CDATA[
Sortable.create('jugadores',{
tag:'div',
dropOnEmpty: true,
containment:["jugadores","EI","ED", "LI", "LD", "PI", "CE"],
constraint:false});
Sortable.create('EI',{
tag:'div',
dropOnEmpty: true,
containment:["jugadores","EI","ED", "LI", "LD", "PI", "CE"],
constraint:false});
Sortable.create('ED',{
tag:'div',
dropOnEmpty: true,
containment:["jugadores","EI","ED", "LI", "LD", "PI", "CE"],
constraint:false});
Sortable.create('LD',{
tag:'div',
dropOnEmpty: true,
containment:["jugadores","EI","ED", "LI", "LD", "PI", "CE"],
constraint:false});
Sortable.create('EI',{
tag:'div',
dropOnEmpty: true,
containment:["jugadores","EI","ED", "LI", "LD", "PI", "CE"],
constraint:false});
Sortable.create('LI',{
tag:'div',
dropOnEmpty: true,
containment:["jugadores","EI","ED", "LI", "LD", "PI", "CE"],
constraint:false});
Sortable.create('CE',{
tag:'div',
dropOnEmpty: true,
containment:["jugadores","EI","ED", "LI", "LD", "PI", "CE"],
constraint:false});
Sortable.create('PI',{
tag:'div',
dropOnEmpty: true,
containment:["jugadores","EI","ED", "LI", "LD", "PI", "CE"],
constraint:false});
Sortable.create('pagina',{
tag:'div',
only:'seccion',
handle:'arrastrar'});
// ]]>
</script>
</body>
</html>
Saludos y gracias |