我们如何将ui.draggable附加到将整个可拖动元素保留在其位置的目标上？

Question

请参见下面的代码段。谢谢。

我们希望将原始可拖动元素保留到其位置。这样我们就可以将其用于其他可放置元素。

$('.draggable').draggable({
  helper: 'clone'
});

$('.droppable').droppable({
  accept: '.draggable',
  drop: function(e, ui) {
    $(this).append(ui.draggable);
  }
});

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<div class="droppable" id="drop-one"></div>
<div class="droppable" id="drop-two"></div>
<div class="droppable"id="drop-three"></div>

<div id="draggables">
  <div class="draggable"></div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Answer 1

您靠近答案，但在放置功能中犯了一个错误。

您写道：

$(this).append(ui.draggable);

但是您必须使用克隆功能。

$(ui.draggable).clone().appendTo(this);

代码段（我添加了颜色以查看发生的情况）

    $(".draggable").draggable({cursor: "crosshair", revert: "invalid", helper: "clone", start: function(event, ui) {} });

    $('.droppable').droppable({
        accept: '.draggable',
        drop: function(e, ui) {
            //$(this).append(ui.draggable);
            $(ui.draggable).clone().appendTo(this);
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="draggables" style="padding-bottom: 25px;">
  <div class="draggable" style="width: 100px; height: 25px; text-align: center; background-color: red; color: aliceblue;">DRAG ME</div>
</div>


    <div class="droppable" id="drop-one" style="float:left; background-color: antiquewhite; width: 200px; height: 200px;"></div>
    <div class="droppable" id="drop-two" style="overflow: hidden; background-color: aquamarine; width: 200px; height: 200px;"></div>