如何在 JavaScript 或 jQuery 中将相同的元素多次拖放到另一个 div 框中？

Question

我有两个 HTML div 框。假设框A和框B。我想将框A多次拖放到框B中。如果我将框A​​放到框B之外，那么框A将恢复到原来的位置。将框 A（克隆）放入框 B 后，我想将框 A（克隆）移动到框 B 中的任何位置。现在我做了代码来做到这一点。

现在我想要的是在我将盒子 A 放入盒子 B 之后，然后如果我将盒子 A（克隆）拖放到盒子 B 之外，那么盒子 A（克隆）需要隐藏或恢复到它的原始位置（盒子父职位）。

HTML 代码

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

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

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

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

你可以看演示：https://jsfiddle.net/zajjith/3kedjgb0/10/

如果我将框 A（克隆）拖放到框 B 之外，则该克隆框 A 需要恢复到其原始父框 A 的位置或隐藏或删除。

我希望你明白我想要什么。请检查我的代码并帮助我。

Answer 1

请参阅https://jqueryui.com/droppable/#revert 的示例

使用您的代码，您可以执行以下操作。

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