我们如何将 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

您接近答案但在 drop 函数 中犯了错误

您写了：

$(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>

我们如何将 ui.draggable 附加到目标以保留整个可拖动元素？

How can we append an ui.draggable to a target retaining the entire draggable element in its place?

jquery-ui-draggable

jquery-ui-droppable