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

Zajjith vedha

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

现在我想要的是将盒子A放到盒子B中之后，如果我将盒子A（克隆）拖放到盒子B之外，那么盒子A（克隆）需要隐藏或恢复到其原始位置（盒子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的位置，或者隐藏或删除。

我希望你明白我想要的。请检查我的代码并为我提供帮助。

曲折的

请参阅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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。