Tengo dos cuadros div HTML. Digamos que el cuadro A y el cuadro B. Quiero arrastrar y soltar el cuadro A varias veces en el cuadro B. Si suelto el cuadro A fuera del cuadro B, entonces el cuadro A volverá a su posición original. Después de dejar caer la caja A (clonar) en la caja B, quiero mover la caja A (clonar) a cualquier posición en la caja B. Por ahora hice los códigos para hacer eso.

Ahora lo que quiero es después de soltar el cuadro A en el Cuadro B, luego si arrastro y suelto el cuadro A (clon) fuera del cuadro B, entonces el cuadro A (clon) debe esconderse o volver a su posición original (cuadro A posición principal ).

Códigos HTML

<div id="boxB"></div>
    
        <br>

<div class="boxA">BOX A</div>

Códigos CSS

#boxB {
    width: 200px;
    border: 5px solid black;
    padding: 50px 50px;
    margin: auto;
    text-align: center;
    background-color: #FFFFFF;
}

.boxA {
    width: 40px;
    border: 2px solid black;
    text-align: center;
    background-color: #F5D938;
    cursor: pointer;
}

Códigos JavaScript + jQuery

$(document).ready(function()
    {
var x;

        $(".boxA").draggable(
        {
            helper: "clone",
            cursor: "move",
            revert: true
        });

        $("#boxB").droppable(
        {
            accept: ".boxA",
            drop: function(event, ui) 
            {
              x = ui.helper.clone();
              ui.helper.remove();
              x.appendTo('#boxB');
              $(x).draggable();
            }
        });
    });

Puede ver la demostración: https://jsfiddle.net/zajjith/3kedjgb0/10/

Si arrastro y suelto el cuadro A (clon) fuera del cuadro B, entonces ese cuadro de clonación A debe volver a su posición original del cuadro principal A u ocultarlo o eliminarlo.

Espero que entiendas lo que quiero. Por favor revisa mis códigos y ayúdame.

0
Zajjith Vedha 21 ene. 2021 a las 20:39

1 respuesta

La mejor respuesta

Consulte el ejemplo en https://jqueryui.com/droppable/#revert

Usando su código, puede hacer lo siguiente.

$(function() {
  function getBounds(el) {
    var p = $(el).position();
    p.right = p.left + $(el).width();
    p.bottom = p.top + $(el).height();
    return p;
  }

  function isOver(a, b) {
    var ap;
    if (typeof a == "object") {
      ap = a;
    } else {
      ap = getBounds(a);
    }
    var bp = getBounds(b);
    return (ap.left > bp.left && ap.right < bp.right) && (ap.top > bp.top && ap.bottom < bp.bottom);
  }
  $(".boxA").draggable({
    helper: "clone",
    cursor: "move",
    revert: "invalid"
  });
  $("#boxB").droppable({
    accept: ".boxA",
    drop: function(event, ui) {
      var cl = ui.helper.clone();
      cl.appendTo(this).draggable({
        appendTo: "body",
        stop: function(e, ui) {
          if (isOver($.extend({}, ui.position, {
              right: ui.position.left + ui.helper.width(),
              bottom: ui.position.top + ui.helper.height()
            }), $("#boxB")) == false) {
            var a = getBounds($("body > .boxA"));
            ui.helper.animate({
              top: a.top,
              left: a.left
            }, function() {
              ui.helper.remove();
            });
          } else {
            console.log("Drop Inside");
          }
        }
      });
      ui.helper.remove();
    }
  });
});
#boxB {
  width: 200px;
  border: 5px solid black;
  padding: 50px 50px;
  margin: auto;
  text-align: center;
  background-color: #FFFFFF;
}

.boxA {
  width: 50px;
  border: 2px solid black;
  text-align: center;
  background-color: #F5D938;
  cursor: pointer;
}
<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>

<div id="boxB"></div>
<br />
<div class="boxA">BOX A</div>
0
Twisty 22 ene. 2021 a las 00:17