1

Estoy intentando hacer lo siguiente: un div en forma de cuadrado, animadamente baja hasta un div que es un "droppable". el div que cae es "draggable", pero solo me funciona si lo agarro y lo dejo en el div "droppable." La idea es que el div que está abajo se active porque ha capturado que el div que cae está dentro. El link lo tengo aquí con el ejemplo:

var cont = 0;

$('#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>
<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>

jsFiddle Original

1 respuesta 1

1

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?

5
  • Hola, al final lo estoy usando con un plugin denominado JQUERY colision. Mas o menos funciona, el fallo que veo con tu solución es que tienes que dejar de hacer drag para que me cuente el contador, y realmente lo suyo sería que sin parar de arrastrar el cuadrado funcionase igal.
    – otacon070
    Commented el 6 nov. 2019 a las 10:23
  • Si, realmente lo "trampea". Por lo cual por detrás estará simulando hacer click en el elemento y soltarlo cuando acaba la simulación. Por lo que al soltar este elemento también se suelta el otro "contenedor"
    – x3k
    Commented el 6 nov. 2019 a las 10:44
  • Claro, lo que no quiero es meterme en librerias de juegos para lo que quiero hacer, básicamente lo que quiero es que al arrastrar el cuadradito detecte lo que baja y me haga el contador, pero no encuentro una solucion que acabe de funcionar bien.
    – otacon070
    Commented el 6 nov. 2019 a las 10:54
  • @otacon070 Entendi la pregunta mal entonces. Si no te importa que no sea con la funcionalidad de drag and drop es mucho mas facil. Es comparar los offsets de cada elemento. He creado otro snippet (oculto al final de la respuesta), en el que se comparan los offsets
    – x3k
    Commented el 6 nov. 2019 a las 12:11
  • @x3k-js si, este snippet lo conocía y lo tenía como 2 opción , gracias. Supongo que para mobile deberé de usar una libreria mobile de ui , dado que no solo funcionará esto en desktop.
    – otacon070
    Commented el 6 nov. 2019 a las 12:42

Tu Respuesta

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

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