Se puede hacer pero tendrías que provocar/simular el drag del item (el que cae).
Esto lo puedes hacer de varias maneras, creando tu código para trampear/hackear el drag de este item y que no sea necesario que el usuario realice el drag, así podrías hacer endDrag();
(por ejemplo) cuando acaba la animación.
En este caso, yo voy a usar un plugin de jQuery
para simular el drag jQuery-Simulate en concreto la siguiente versión/extensión jQuery-Simulate GitHub,
Por otra parte, si usas jQuery-UI
, la animación deberías de hacerla con .animate(), para así controlar el callback de cuando acaba la animación y en ese momento simular el drag.
Nota: He añadido un valor random a la posición del item para que tenga mas gracia :P
var cont = 0;
$(document).ready(function() {
animateItem();
});
function animateItem() {
$("#lluvia").css("left","calc("+(Math.floor(Math.random() * 100) + 1)+"% - "+"30px");
//Le cambio la posición por una aleatoria
$("#lluvia").addClass("ui-draggable-dragging");
//Le agrego la clase que tienen los elementos cuando estan agarrados "dragging"
$('#lluvia')
.css({top:0,position:'absolute'})
.animate({top:670}, 2000, function() {
//El top es 670 al igual que la altura del contenedor
//El siguiente parametro es el tiempo que tarda la animación en completarse
$("#lluvia").removeClass("ui-draggable-dragging");
//Se le borra la clase, ya no esta "dragging"
$("#lluvia").simulate('drag');
//Se provoca la simulacion del drag
setTimeout(animateItem,2000);
//Se vuelve a llamar a la función
});
}
$('#lluvia').draggable({
create: function(event, ui) {
//alert("creado");
},
start: function(event, ui) {
console.log("empezmaos");
},
});
$(".draggable").droppable({
tolerance: "touch",
drop: function(event, ui) {
var target = $(event.target);
console.log(target);
$(this).css('background', 'black');
},
over: function(event, ui) {
console.log(event);
console.log(ui);
$(this).css('background', 'orange');
cont++;
$('.contador').html(cont);
console.log('Cogido', cont);
},
out: function(event, ui) {
$(this).css('background', 'red');
}
});
$('.draggable').draggable({
containment: "parent"
}).filter('#drag_X').draggable("option", "axis", "x");
h3 {
text-align: center;
}
.container {
width: 99%;
border: 1px solid red;
height: 200px;
position: fixed;
bottom: 0;
overflow: hidden;
}
.containerpadre {
width: 100%;
border: 1px solid blue;
height: 670px;
position: relative;
overflow: hidden;
}
.contador {
text-align: center;
color: red;
font-size: 30px;
}
.draggable {
width: 200px;
height: 200px;
background-color: #666;
color: white;
cursor: move;
position: relative;
border: 1px solid black;
/* important (all position that's not `static`) */
}
#lluvia {
width: 30px;
height: 30px;
background-color: #666;
color: white;
cursor: move;
position: relative;
border: 1px solid black;
padding: 3px;
display: inline-block;
margin: 12px;
z-index: 99;
/* important (all position that's not `static`) */
-/*webkit-animation: tiembla 7.00s infinite;*/
}
@-webkit-keyframes tiembla {
0% {
-webkit-transform: rotateZ(-5deg);
-webkit-transform: translate(0, -3750px) rotate(360deg);
}
100% {
-webkit-transform: translate(0, 0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://gitcdn.link/repo/jquery/jquery-ui/9e8e339648901899827a58e5bf919f7dda03b88e/tests/jquery.simulate.js"></script>
<h3>DRAP AND DROP</h3>
<div class="contador">0</div>
<div class="containerpadre">
</div>
<div id="lluvia" class=" lluvia"></div>
<div class="container">
<div id="drag_X" class="draggable ui-widget-content">Mueveme!!!
<span></span>
</div>
</div>
Snippet comparando los offsets:
var cont = 0;
$(document).ready(function() {
animateItem();
});
function animateItem() {
$("#lluvia").css("left","calc("+(Math.floor(Math.random() * 100) + 1)+"% - "+"30px");
//Le cambio la posición por una aleatoria
$("#lluvia").addClass("ui-draggable-dragging");
//Le agrego la clase que tienen los elementos cuando estan agarrados "dragging"
$('#lluvia')
.css({top:0,position:'absolute'})
.animate({top:870}, 2000, function() {
//El top es 670 al igual que la altura del contenedor
//El siguiente parametro es el tiempo que tarda la animación en completarse
$("#lluvia").removeClass("ui-draggable-dragging");
//Se le borra la clase, ya no esta "dragging"
if(estaDentro(document.getElementById("lluvia"),document.getElementById("drag_X"))){
cont++;
$('.contador').html(cont);
}
//Se provoca la simulacion del drag
setTimeout(animateItem,2000);
//Se vuelve a llamar a la función
});
}
function estaDentro(el1, el2) {
el1.offsetBottom = el1.offsetTop + el1.offsetHeight;
el1.offsetRight = el1.offsetLeft + el1.offsetWidth;
el2.offsetBottom = el2.offsetTop + el2.offsetHeight;
el2.offsetRight = el2.offsetLeft + el2.offsetWidth;
return ((el1.offsetTop >= el2.offsetTop) &&
(el1.offsetBottom <= el2.offsetBottom) &&
(el1.offsetRight <= el2.offsetRight) &&
(el1.offsetLeft >= el2.offsetLeft))
};
$('#lluvia').draggable({
create: function(event, ui) {
//alert("creado");
},
start: function(event, ui) {
console.log("empezmaos");
},
});
$(".draggable").droppable({
tolerance: "touch",
drop: function(event, ui) {
var target = $(event.target);
console.log(target);
$(this).css('background', 'black');
},
over: function(event, ui) {
console.log(event);
console.log(ui);
$(this).css('background', 'orange');
cont++;
$('.contador').html(cont);
console.log('Cogido', cont);
},
out: function(event, ui) {
$(this).css('background', 'red');
}
});
$('.draggable').draggable({
containment: "parent"
}).filter('#drag_X').draggable("option", "axis", "x");
h3 {
text-align: center;
}
.container {
width: 99%;
border: 1px solid red;
height: 200px;
bottom: 0;
overflow: hidden;
}
.containerpadre {
width: 100%;
border: 1px solid blue;
height: 670px;
position: relative;
overflow: hidden;
}
.contador {
text-align: center;
color: red;
font-size: 30px;
}
.draggable {
width: 200px;
height: 200px;
background-color: #666;
color: white;
cursor: move;
position: relative;
border: 1px solid black;
/* important (all position that's not `static`) */
}
#lluvia {
width: 30px;
height: 30px;
background-color: #666;
color: white;
cursor: move;
position: relative;
border: 1px solid black;
padding: 3px;
display: inline-block;
margin: 12px;
z-index: 99;
/* important (all position that's not `static`) */
-/*webkit-animation: tiembla 7.00s infinite;*/
}
@-webkit-keyframes tiembla {
0% {
-webkit-transform: rotateZ(-5deg);
-webkit-transform: translate(0, -3750px) rotate(360deg);
}
100% {
-webkit-transform: translate(0, 0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<h3>DRAP AND DROP</h3>
<div class="contador">0</div>
<div class="containerpadre">
</div>
<div id="lluvia" class=" lluvia"></div>
<div class="container">
<div id="drag_X" class="draggable ui-widget-content">Mueveme!!!
<span></span>
</div>
</div>
Snippet de offset basado en :
How to detect when an element over another element in JavaScript?