不使用clone能否实现jQuery draggable-droppable拖拽功能？

• API调用错误：你代码中使用的appendChild是原生DOM接口，无法直接在jQuery封装的对象上调用，应该使用jQuery提供的append方法完成DOM插入操作。
• 定位参照坐标系变化：jQuery UI在拖拽过程中给draggable元素添加的top、left偏移值是基于元素原父级容器计算的，当你把draggable元素插入到droppable容器后，定位的参照父级发生变化，原有偏移值就会导致元素错位跳到画布角落。

你可以在drop事件触发时，先计算draggable元素相对于droppable容器的正确坐标，再调整元素定位后插入容器即可实现停在释放位置的效果，修复后代码如下：

<body>
<div id="droppable" style="width:300px;height:300px;border:2px solid #ccc;position:relative;">Drop here</div>
<div id="draggable" style="width:50px;height:50px;background:#f00;">Drag me</div>
<!-- 请提前引入jQuery和jQuery UI依赖 -->
<script>
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
  drop: function(event, ui) {
    // 计算拖拽元素相对于droppable容器的偏移
    const dropOffset = $(this).offset();
    const dragLeft = ui.offset.left - dropOffset.left;
    const dragTop = ui.offset.top - dropOffset.top;
    // 重置拖拽元素定位属性，以droppable为参照父级
    ui.draggable.css({
      left: dragLeft,
      top: dragTop,
      position: 'absolute'
    });
    // 插入拖拽元素到droppable容器
    $(this).append(ui.draggable);
  }
});
</script>
</body>

• 给droppable容器添加position: relative样式，作为内部元素绝对定位的参照基准
• drop回调中通过ui.offset获取拖拽元素释放时相对于整个文档的坐标，减去droppable容器的文档偏移，得到元素在新容器内的正确坐标
• 替换错误的appendChild调用为jQuery的append方法
• 显式设置draggable元素的position为absolute，绑定计算后的坐标值，保证元素停在释放位置

内容的提问来源于stack exchange，提问作者Yuka Fujisaku