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.