Захватывать div в элементе droppable (Jquery UI)

Я пробую делать следующее: div в форме квадрата, оживленно загружается до div, который является "droppable". div, который падает, - "draggable", но только оно я функционирует, если я это схватываю и это оставляю в div "droppable." Идея состоит в том, чтобы div, который внизу, был включен, потому что он захватил, что div, который падает, внутри. Соединение это у меня есть здесь с примером:

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);
  }
}


DRAP AND DROP

0
Mueveme!!!

jsFiddle Оригинал

1
задан 05.11.2019, 17:25
1 ответ

Возможно делать, но tendrГ-эксперт, который должен вызывать / симулировать drag статьи (которая падает).

ты можешь делать Это несколькими способами, создавая ты cГіdigo для дурачить / подвергаться нападению хакеров drag этой статьи, и что не был необходим, который пользователь реализовал drag, asГ - podrГ-схвати делать endDrag(); (например), когда он заканчивает ее animaciГіn.

В этом случае, я буду использовать plugin jQuery, чтобы симулировать drag jQuery-Simulate в частности следующая versiГіn/extensiГіn jQuery-Simulate GitHub ,

С другой стороны, если ты используешь jQuery-UI, она animaciГіn deberГ-схвати делания с .animate () , для asГ - контролировать callback, когда он заканчивает ее animaciГіn и в этом моменте симулировать drag.

Замечает: - aГ±adido стоимость random в нее posiciГіn статьи для того, чтобы у него было больше изящество :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 сравнивая 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 офсета, основанного в:

How to detect when an element over another element in язык сценариев JavaScript?

1
ответ дан 01.12.2019, 12:41
  • 1
    Привет, в конце концов я это использую с plugin названным JQUERY столкновение. Более или менее функционируй, неудача, которую я вижу с твоим solució n дело в том, что ты должен прекращать делать drag для того, чтобы мне рассказал счетчик, и действительно его serí в который немедленно тащения квадрата функционировало igal. – otacon070 06.11.2019, 12:23
  • 2
    Если, действительно это " trampea". Из-за чего из-за detrá s estará симулируя кликать в элементе и посылать это, когда он заканчивает simulació n. Из-за которого, послав этот элемент tambié n освобождается другой " contenedor" – x3k_js 06.11.2019, 12:44
  • 3
    Конечно то, что я не хочу, состоит в том, чтобы помещать меня в книжные магазины игр, для которого я хочу сделать, bá sicamente то, что я хочу, состоит, в том, чтобы после того, как тащит cuadradito, он обнаружил то, что он загружает, и сделал мне счетчик, но я не нахожу решение, которое только что бы функционировало хорошо. – otacon070 06.11.2019, 12:54
  • 4
    @otacon070 Я Понял вопрос плохо тогда. Если тебе не важно, чтобы он не был с функциональностью drag and drop, он гораздо более легкий. Он состоит в том, чтобы сравнивать offsets каждого элемента. Я создал другой snippet (я скрываю в конце ответа), в котором сравниваются offsets – x3k_js 06.11.2019, 14:11
  • 5
    @x3k-js, если, этот snippet conocí в и tení в как 2 opció n, спасибо. Я предполагаю, что для mobile deberé использования книжного магазина mobile ui, ввиду того, что не только funcionará это в desktop. – otacon070 06.11.2019, 14:42