Как мы можем добавить 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>