javascript - 如果元素已经存在于容器中，我们如何使元素可拖放？

Question

我正在研究 jquery-UI，我能够使 html 元素可拖放，但这些所有元素都不是 container 的一部分，然后删除意味着它们存在于 container 外部，我将所有这些元素拖入 container 。放下这些元素后，也可以移动到容器内。但是后来我有了一个想法，我复制了删除元素的 html 代码并将其放入容器中，然后我重新加载我的浏览器窗口，现在有三个 div: 拖我，放下我，让我可以拖动(复制的内容)。我的问题是哪个 div 在容器内(让我可以拖动)不动。所以请任何人帮助我以下是我的代码:

$(document).ready(function() {
  $('.drag').draggable({
    helper: "clone",
    appendTo: "body",
    revert: "invalid"
  });

  $('.container').droppable({
    accept: ".drag",
    drop: function(e, u) {
      var a = u.helper.clone();
      var parent = $('.container');

      a.css("z-index", 1000);
      a.appendTo(".container");

      var leftAdjust = a.position().left - parent.offset().left;
      var topAdjust = a.position().top - parent.offset().top;

      a.css({
        left: leftAdjust,
        top: topAdjust
      });

      console.log("INFO: Accepted: ", a.attr("class"));
      a.attr('class', 'dropped').draggable({
        containment: ".container"
      });
    }
  });
});

.drag {
  text-align: center;
  margin-top: 5px;
  width: 100px;
  height: 100px;
  color: white;
  background-color: red;
  margin-bottom: 5px;
  border: 1px solid black;
}
.container {
  text-align: center;
  width: 400px;
  margin-top: 5px;
  margin-left: 5%;
  height: 400px;
  color: white;
  background-color: green;
  border: 1px solid black;
}
.dropped {
  text-align: center;
  width: 100px;
  height: 100px;
  color: white;
  background-color: red;
  border: 1px solid black;
}
body {
  display: flex;
}

<div class="drag">Drag me</div>
<div style="position:relative" class="container">drop here !!
  <div class="dropped ui-draggable" style="position: absolute; left: 299px; top: 299px; z-index: 1000;">Make me draggable</div>
</div>

Answer 1

我没有改变太多你的代码，因为我不太了解你的目标，但在完成后，我让 Make me draggable div draggable (参见 fiddle)。

$(文档).ready(函数() { 可拖动()； 函数 dodragable(){ $('.drag').draggable({ helper :“克隆”， 追加到:“正文”， 恢复:“无效” });

$('.container').droppable({
            accept: ".drag",
            drop: function(e, u) {
            var a = u.helper.clone();
            var parent = $('.container');
                 a.css("z-index", 1000);
                a.appendTo(".container");
            var leftAdjust = a.position().left - parent.offset().left;
            var topAdjust = a.position().top - parent.offset().top;
            a.css({left: leftAdjust, top: topAdjust});

                console.log("INFO: Accepted: ", a.attr("class"));
                a.attr('class', 'dropped').draggable({
                containment: ".container"
                });

                $('.make_dragable').draggable();
                dodragable()
            }
        });
});