如何在拖放时克隆 div 而不是在拖动开始时克隆

Question

通过使用 jQuery UI，我想只在删除时创建某个 div 的克隆。当您开始拖动并准备再次拖动时，应该将这个 div 克隆在同一点。

例如在这个fiddle 中是否可以克隆绿色元素，在初始位置，只有当它们被丢弃时？

这是我的 JS：

$(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) {
      var clone = ui.helper.clone();
      clone.draggable();
      clone.appendTo('#droppable-box');
    }
  });
});

Answer 1

我认为克隆后需要重新初始化可拖动元素，我已经更改了JS函数drop参考下面的代码。

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

$(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) {
      var clone = ui.helper.clone();
      clone.appendTo('#droppable-box');
      clone.draggable({
        helper: "clone"
      });
    }
  });
});

.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>