Drag and drop en varias areas

bienpiyao · #1 (**permalink**) 18/09/2018, 01:30

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!!

X_fran · #2 (**permalink**) 18/09/2018, 09:48

Estás haciendo "droppable" a elementos dentro de la página que tienen el mismo id, cambia y hazlo por una clase y no por su id.

en relación a la solicitud, pues como mismo haces una iteración pintando elementos dede php, pudieras desde el javascript hacer una iteración por todos los elementos que quieres sean droppables o dragables si asi fuera el caso, y le asignas la funcionalidad o el evento:

Código PHP:

Ver original<?php
while( $row2 = mysqli_fetch_array( $res2 ) ) 
        {                       
?>
            
            
            <img id="<?php echo $row2["id"];?>" class="droppables" src="imagenes/frutas/<?php echo $row2["nombre"]; ?>.png" width="50" height="50">         
                            
<?php
        
        }
                    
?>

Código Javascript:

Ver original$(".droppables").each(i){
     var id = $(this).prop("id"); // asi tienes el id del elemento en cuestion para si lo necesitas enviar al servidor via ajax, imagino te haga falta
     $(this).droppable({
        ......
     });
};

muy similar a este, pero con los elementos draggables y todos los comportameintos que necesites asignarle a tus div

bienpiyao · #3 (**permalink**) 19/09/2018, 01:01

Cita:

Iniciado por X_fran

Estás haciendo "droppable" a elementos dentro de la página que tienen el mismo id, cambia y hazlo por una clase y no por su id.

en relación a la solicitud, pues como mismo haces una iteración pintando elementos dede php, pudieras desde el javascript hacer una iteración por todos los elementos que quieres sean droppables o dragables si asi fuera el caso, y le asignas la funcionalidad o el evento:

Código PHP:

Ver original<?php
while( $row2 = mysqli_fetch_array( $res2 ) ) 
        {                       
?>
            
            
            <img id="<?php echo $row2["id"];?>" class="droppables" src="imagenes/frutas/<?php echo $row2["nombre"]; ?>.png" width="50" height="50">         
                            
<?php
        
        }
                    
?>

Código Javascript:

Ver original$(".droppables").each(i){
     var id = $(this).prop("id"); // asi tienes el id del elemento en cuestion para si lo necesitas enviar al servidor via ajax, imagino te haga falta
     $(this).droppable({
        ......
     });
};

muy similar a este, pero con los elementos draggables y todos los comportameintos que necesites asignarle a tus div

Buenas X_fran,

En primer lugar, muchísimas gracias por tomarte la molestia de ayudarme...¡Gracias!

No soy nada ducho con jQuery como habrás podido comprobar. No sé muy bien cómo tengo que añadir la parte de jQuery a mi código :(. Me puedes ayudar, por favor.

Gracias por anticipado y perdona las molestias.