0

Estoy haciendo que una imagen al arrastrarla en un div se suelte y quede. Pero si el div lo genero dinámicamente no se hace el drop. Podrian ayudarme? Gracias.

Ejemplo: Si primero creo los divs droppables funciona bien. Se puede ver en funcionamiento en https://www.consulti.es/jquery/index1.html

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style type="text/css">
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}

#col1{
width:300px;
height:300px;
border:1px solid black;
}
#droppable3{
    position:absolute;
    z-index:1;
    margin-left:350px;
width:200px;
min-height :300px;
border:1px solid black;
}

#droppable31{
    position:absolute;
    z-index:3;
width:100px;
height :100px;
border:1px solid black;
background: red;
}
#droppable32{
    position:absolute;
    z-index:3;
    margin-top:120px;
width:100px;
height :100px;
border:1px solid black;
background: yellow;
}
#sobimagen{
    position:relative;
    z-index:5;
}
</style>
</head>
<body>
    <div id="wrapper">
            <div id="row">
                    <div class = "col" id="col1">
                             <div id="drag1" class="drag"><img src="https://www.consulti.es/imagenes/lamp.png" width="200" height="100" alt="Foto" id="sobimagen"></div>
                    </div>
            <div class="col" id ="droppable3">
                      <div class="col" id ="droppable31"> </div>
                      <div class="col" id ="droppable32"> </div>
            </div>
         </div>
    </div>

 <script>
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'pointer', 
});

     $("#droppable31").droppable({
          drop: function (e, ui) {
            var x = ui.draggable.find('img').clone();
            $(this).append(x);
            x.css('height', 'auto');
            x.animate({width: '90%', margin: '5%', display: 'block'}, 1000);
            }       
        });

     $("#droppable32").droppable({
          drop: function (e, ui) {
            var x = ui.draggable.find('img').clone();
            $(this).append(x);
            x.css('height', 'auto');
     x.animate({width: '90%', margin: '5%', display: 'block'}, 1000);
            }       
        });

    });
    </script>
</body>

El segundo ejemplo que no me funciona esta en: https://www.consulti.es/jquery/index2.html

Si le doy al boton cargar crea un drop dinamicamente y luego no hace el drag and drop.

2
  • Revisa el código porque no se entiende nada. el 23 ene. 2018 a las 8:40
  • Ya he modificado el codigo y he puesto 2 links para que se vea el funcionamiento. el 23 ene. 2018 a las 15:16

1 respuesta 1

1

Eso pasa porque al hacerlo dinámico, el código javascript que escribiste abajo lo estas ejecutando a una div que todavía no existe.

Tenes que primero crear la div y luego ejecutarle el "droppeable"

Acá un ejemplo de como hacer para que funcione:

$(document).ready(function () {
    
  $("#cargar").click(function() {
  
    var div = $("<div id='droppable31'></div>");
    
    $('#droppable3').append(div);
    
    div.droppable({
        drop: function (e, ui) {
          var x = ui.draggable.find('img').clone();
          $(this).append(x);
          x.css('height', 'auto');
          x.animate({width: '90%', margin: '5%', display: 'block'}, 1000);
          }       
      });
  });
    
  //Make element draggable
  $(".drag").draggable({
      helper: 'clone',
      cursor: 'move',
      tolerance: 'pointer', /*'touch'*/
  });
});
<html><head>

        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <style type="text/css">
    .col{
    float:left;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
    }

    #col1{
    width:300px;
    height:300px;
    border:1px solid black;
    }
    #col2{
        margin-left:350px;
    width:300px;
    height:300px;
    border:1px solid black;
    }
    #droppable3{
        position:absolute;
        z-index:1;
        margin-left:350px;
    width:200px;
    min-height :300px;
    border:1px solid black;
    }

    #droppable31{
        position:absolute;
        z-index:3;
    width:100px;
    height :100px;
    border:1px solid black;
    background: red;
    }
    #sobimagen{
        position:relative;
        z-index:5;
    }
    </style>
    </head>
    
   <body>
        <div id="wrapper">
                <div id="row">
                        <div class="col" id="col1">
                                 <div id="drag1" class="drag ui-draggable ui-draggable-handle"><img src="https://www.consulti.es/imagenes/lamp.png" width="200" height="100" alt="Foto" id="sobimagen"></div>
                        </div>
                        <div class="col" id="col2">
                                <div class="col" id="col3"><button id="cargar">Cargar</button></div>
                        </div>
                        <div class="col" id="droppable3">
                        </div>
                </div><!--row-->
        </div>

        <script>


        $("#cargar").click(function() {
            
            $('#droppable3').append("<div id='droppable31'></div>");
  	});

        $(document).ready(function () {
    
    		var x = null;
    
		//Make element draggable
		$(".drag").draggable({
		        helper: 'clone',
		        cursor: 'move',
		        tolerance: 'pointer', /*'touch'*/
		 });

         $("#droppable31").droppable({
              drop: function (e, ui) {
                var x = ui.draggable.find('img').clone();
                $(this).append(x);
                x.css('height', 'auto');
                x.animate({width: '90%', margin: '5%', display: 'block'}, 1000);
                }       
            });
         $("#droppable32").droppable({
              drop: function (e, ui) {
                var x = ui.draggable.find('img').clone();
                $(this).append(x);
                x.css('height', 'auto');
                x.animate({width: '90%', margin: '5%', display: 'block'}, 1000);
                }       
            });

        });
        </script>
    


</body>
    </html>

3
  • Muchas gracias, es lo que necesitaba. el 23 ene. 2018 a las 17:59
  • @CrisPonsGarriga Si esto solucionó tu problema, marca la respuesta como aceptada pulsando en el ✓ de la parte superior izquierda.
    – Alvaro Montoro
    el 23 ene. 2018 a las 18:00
  • Me alegro @CrisPonsGarriga, como dice Alvaro, recordá marcar la respuesta como valida para que pueda ayudar a otras personas. Saludos! el 23 ene. 2018 a las 18:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.