克隆后 div 不再可丢弃

Question

在这个website 上，我正在尝试从左到右克隆和拖放对象。

拖放我没问题，但碰巧我克隆了一个 div，这不再是可拖放的了。

删除后，克隆的 div 会自动对齐到我的可放置“区域”。

如果它们没有被克隆，则不会发生这种情况。

$(function() {
  $("#dragrabble-one").draggable({
    helper: 'clone'
  });
  $("#dragrabble-two").draggable({
    helper: 'clone'
  });
  $("#dragrabble-three").draggable({
    helper: 'clone'
  });
  $("#dragrabble-four").draggable({
    helper: 'clone'
  });
  $("#dragrabble-five").draggable({
    helper: 'clone'
  });
  $("#dragrabble-six").draggable({
    helper: 'clone'
  });
  $("#dragrabble-seven").draggable({
    helper: 'clone'
  });
  $("#dragrabble-eight").draggable({
    helper: 'clone'
  });
  $("#dragrabble-one").draggable({
    revert: "invalid"
  });
  $("#dragrabble-two").draggable({
    revert: "invalid"
  });
  $("#dragrabble-three").draggable({
    revert: "invalid"
  });
  $("#dragrabble-four").draggable({
    revert: "invalid"
  });
  $("#dragrabble-five").draggable({
    revert: "invalid"
  });
  $("#dragrabble-six").draggable({
    revert: "invalid"
  });
  $("#dragrabble-seven").draggable({
    revert: "invalid"
  });
  $("#dragrabble-eight").draggable({
    revert: "invalid"
  });
  $("#droppable-box").droppable({
    drop: function (event, ui) {
	ui.helper.clone().appendTo('#droppable-box');
}
  });
});

.box
{
  height: 30px;
  width: 50px;
  border: 1px solid black;
  background: green;
}

#droppable-box
{
  height: 400px;
  width: 200px;
  border: 1px solid black;
  background: lightgray;
}

.container
{
  border: 1px solid black;
  float: left;
  margin: 0 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<span>Drag green boxes onto gray dropzone</span>

<div class="container">
  <div class="box" id="dragrabble-one"></div><br />
  <div class="box" id="dragrabble-two"></div><br />
  <div class="box" id="dragrabble-three"></div><br />
  <div class="box" id="dragrabble-four"></div><br />
  <div class="box" id="dragrabble-five"></div><br />
  <div class="box" id="dragrabble-six"></div><br />
  <div class="box" id="dragrabble-seven"></div><br />
  <div class="box" id="dragrabble-eight"></div><br />
</div>

<div class="container">
  <div id="droppable-box">Drop Zone</div>
</div>

编辑：我尝试的也是这个

$("#droppable-box").droppable({
  drop: function (event, ui) {
    var clone = ui.helper.clone();
    clone.draggable();
    clone.appendTo('#droppable-box');
  }
});

没有任何结果（在我的网站上）。

Answer 1

那是因为克隆需要用可拖动实例化。

试试这个：

$("#droppable-box").droppable({
  drop: function (event, ui) {
    var clone = ui.helper.clone();
    clone.draggable();
    clone.appendTo('#droppable-box');
  }
});