Hola, tengo un pequeño problema.
Tengo dos cajas que se mueven y cuando se pone la caja A encima de la caja B sale una alerta que dice que está bien, y cuando se pone la caja C encima de la caja D sale una alerta que dice que está bien.
Lo que quiero es que si pongo la caja C sobre la caja B me salga una alerta que me dice incorrecto y si pongo la caja A sobre la caja D me diga incorrecto.
A continuación os pongo el código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Touch Punch - Mobile Device Touch Event Support for jQuery UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="jquery-ui.css" rel="stylesheet">
<style>
</style>
<script src="jquery-1.7.2.min.js"></script>
<script src="prueba.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<style>
body {
background-color:transparent; overflow:auto; width:684px; height:710px; font-family:Verdana, Geneva, sans-serif; font-size:13px;
}
.prueba, .prueba3 {
width: 120px; height:30px; margin-top:20px; float:left; z-index:2; border-radius:10px;
}
#droppable {
width:100px; height:100px; position:absolute; margin:10px 0px 0 330px; z-index:0; border:1px solid black;
}
#droppable2 {
width:100px; height:100px; position:absolute; margin:10px 0 0 450px; z-index:0; border:1px solid black;
}
.prueba {
background-color:#9C0; border:2px solid grey; color:#FFF; margin:0 10px 0 0;
}
.prueba3 {
background-color:#96C; border:2px solid red; color:#FFF;
}
.prueba5 {
background-color:#060; border:5px solid blue; color:white;
}
.prueba6 {
background-color:#060; border:5px solid yellow; color:black;
}
</style>
<script type="text/javascript">
$(function() {
$("#draggable7, #draggable6").draggable();
$("#droppable").droppable({
accept: "#draggable7",
hoverClass: "",
drop: function(event, ui) {
$("#draggable7")
.addClass("prueba5");
alert("Es correcto");
},
out: function(event, ui) {
$("#draggable7")
.removeClass("prueba5");
}
})
$("#droppable2").droppable({
accept:"#draggable6",
hoverClass: "",
drop: function(event, ui) {
$("#draggable6")
.addClass("prueba5");
alert("Es correcto");
},
out: function(event, ui) {
$("#draggable6")
.removeClass("prueba5");
}
})
});
</script>
<div id="draggable6" class="prueba">PRUEBA</div>
<div id="draggable7" class="prueba3">PRUEBA 3</div>
<div id="droppable">DROPPABLE</div>
<div id="droppable2">DROPPABLE 2</div>
</body>
</html>
Muchas gracias
