为什么这个 jQuery 可拖动不克隆到可放置区域？

Question

My jsfiddle 当用户将菜单项拖到可放置区域并将其放下时，您应该会在放置区域中看到该元素，原始元素仍然完好无损地位于上方，但这种情况并未发生。放置成功，因为您可以看到放置功能在成功放置时触发。如果我在放下元素时查看 DOM，我可以看到该元素被克隆，然后在我放开鼠标时立即删除。我需要做什么才能实现我想要的元素拖放？

<div class="node-pallet">
  <span>DIAL</span>
  <span>GOTO</span>
  <span>MENU</span>
  <span>HANGUP</span>
</div>

<div class="canvas"></div>

$('.node-pallet span').draggable({
  helper: 'clone',
  cursor: 'move'
});

$('.canvas').droppable({
  drop: function (event, ui) {
    alert('Drop successful');
  }
});

body {
  background-color: #151824;
}

.canvas {
    background-color: #1f263d;
    height: 200px;
    width: 300px;
}

.node-pallet {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    width: 300px;
}

.node-pallet span {
    background-color: white;
    padding: 1rem 0.5rem;
}

Answer 1

使用 sortable 和 connectWith 属性。

https://jqueryui.com/sortable/#connect-lists

Sort items from one list into another and vice versa, by passing a selector into the connectWith option

Answer 2

加一行。

示例：https://jsfiddle.net/Twisty/yj2osrte/

JavaScript

$('.node-pallet span').draggable({
  helper: 'clone',
  cursor: 'move'
});

$('.canvas').droppable({
  drop: function(event, ui) {
    alert('Drop successful');
    ui.helper.clone().appendTo(this);
  }
});

当它被丢弃时，您需要将一个克隆附加到目标。

为什么这个 jQuery 可拖动不克隆到可放置区域？

Why is this jQuery draggable not cloning into the droppable area?

jquery

jquery-ui