Javascript 拖放时，新元素替换现有元素并将旧元素放回列表中

我正在使用HTML拖放功能。我能够成功地从列表中拖放元素。但是我希望能够在列表中放回一个元素，如果我拖放第二个元素，第一个元素应该自动放回

到目前为止，我的代码还没有实现。当我拖动第二个元素来替换第一个元素时，它很好地替换了该元素，但第一个元素丢失了。我有没有办法把第一个元素放回到列表上

我的代码：

$（'#drag1，#drag2，#drag3'）。在（'dragstart'，函数（e）上{
e、 originalEvent.dataTransfer.setData（'text'，e.target.id）；
});
$（'#div1'）。关于（'drop'，函数（e）{
e、 预防默认值（）；
让data=e.originalEvent.dataTransfer.getData（'text'）；
$（'#div1'）.html（$（'#${data}'）；
});
$（'#div1'）。关于（'dragover'，函数（e）{
e、 预防默认值（）；
});
#第1部分{
宽度：350px；
高度：70像素；
填充：10px；
边框：1px实心#AAAAA；
}






一个
两个
三个
在下拉区域中获取当前项目（我已将id更改为
#target
），并将其添加到
#列表中，然后对项目进行排序：


$（'#list'）。关于（'dragstart'，'li'，函数（e）{
e、 originalEvent.dataTransfer.setData（'text'，e.target.id）；
});
var$target=$（“#target”）；
var$list=$（“#list”）；
$target.on（'drop'，函数（e）{
e、 预防默认值（）；
让data=e.originalEvent.dataTransfer.getData（'text'）；
$list.append（$target.html（））；
$target.html（$（`${data}'）；
/*如果您不关心订单，请忽略此块*/
$list.append(
美元清单
.儿童（‘李’）
.toArray（）
.sort（（a，b）=>+a.dataset.order-+b.dataset.order）
);
/*******************************************************/
});
$target.on（'dragover'，函数（e）{
e、 预防默认值（）；
});
#目标{
宽度：350px；
高度：70像素；
填充：10px；
边框：1px实心#AAAAA；
}






一个
两个
三个
请创建一个JSFIDLE。@jqueryHtmlCSS，我刚刚将它添加到上面的描述中