Muy buenas a todos,
Vaya por delante que soy muy novato en jQuery.
Tengo el siguiente código que funciona perfectamente:
Código Javascript
:
Ver original<script type="text/javascript">
$(document).ready(function(){
$(".draggable").draggable({
cursor: "crosshair",
revert: "invalid",
helper: 'clone'
});
$("#drop").droppable({ accept: ".draggable",
drop: function(event, ui) {
$("#drop").empty();
var check = 0;
// $( "#test" ).droppable( "dragstart", function( event, ui ) {check = 1;} );
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
var droppable = $(this);
console.log("drop");
$(this).removeClass("border").removeClass("over");
var dropped = ui.draggable;
var droppedOn = $(this);
console.log($(this).attr('class'));
if(!elementMouseIsOver.classList.contains("clone")) {
console.log("no clone");
$(dropped).detach().css({top: 0,left: 0}).appendTo("#origin");
// dropped.clone().appendTo(droppedOn);
var clone = dropped.clone().addClass("clone");
//clone[0].id = 'test';
clone.appendTo(droppedOn);
}
},
over: function(event, elem) {
$(this).addClass("over");
console.log("over");
},
out: function(event, elem) {
$(this).removeClass("over");
}
});
$("#drop").sortable();
$("#origin").droppable({
accept: ".draggable",
drop: function(event, ui) {
console.log("drop");
$(this).removeClass("border").removeClass("over");
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}});
});
</script>
Código HTML:
<body>
<div id="wrapper">
<div id="origin" class="fbox">
<?php
$sql2 = "SELECT *
FROM frutas
LIMIT 10";
$res2 = mysqli_query($conexion,$sql2);
while( $row2 = mysqli_fetch_array( $res2 ) )
{
?>
<img id="<?php echo $row2["id"];?>" class="draggable" src="imagenes/frutas/<?php echo $row2["nombre"]; ?>.png" width="50" height="50">
<?php
}
?>
</div>
<div id="drop" class="fbox"></div><div id="drop" class="fbox"></div>
</div>
</body> Como digo, este código funciona perfectamente. Tengo 10 imágenes, y una zona a la que arrastrarlas y soltarlas. Cada vez que pongo una, ésta sustituye a la que había antes. Hasta aquí, perfecto.
El problema con el que me encuentro ahora es que me gustaría tener un número indeterminado de zonas en las que poder soltarlas (2, 3, 4, 20, 12, 30...). Me gustaría que cada zona fuera independiente. Había pensado duplicar el código, pero eso no sería buena práctica, seguro que tiene que haber alguna forma de poder hacerlo dinámico.
¿Alguien me puede echar una mano, por favor?
Gracias por anticipado!!