Javascript拖放交换：填补空白的一种方法

我尝试使用原生HTML5 JavaScript拖放函数来创建自己的填充空白脚本。 但现在我有一个问题，交换和更换的盒子。当我将一个框拖动到非空框中时，该框将附加到非空框中，而不是替换

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
如果（ev.target.tagName==“DIV”）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
var srcParent=data.parentNode；
var tgt=ev.currentTarget.firstElementChild；
ev.currentTarget.replaceChild（数据，tgt）；
电动汽车（数据）；
}否则{
日志（ev.target.childNodes）；
}
}

.text辅助{
颜色：#6c757d！重要；
}
.卡体{
-ms-flex:1自动；
flex:1自动；
填充：1.25rem；
}
P
A.
身体，
按钮
标签，
img，
分区，
我
跨度
页脚，
标题，
第节，
文本区，
输入，
挑选{
字体系列：Segoe！重要；
}
* {
字体系列：Segoe！重要；
}
*,
：：之后，
：：之前{
框大小：边框框；
}
用户代理样式表div{
显示：块；
}
.卡片{
位置：相对位置；
显示：-ms flexbox；
显示器：flex；
-ms-flex方向：列；
弯曲方向：立柱；
最小宽度：0；
单词包装：打断单词；
背景色：#fff；
背景剪辑：边框框；
边框：1px实心rgba（0,0,0,125）；
边界半径：.25rem；
}
.ml-1，
.mx-1{
左边距：.25rem！重要；
}
mr-1，
.mx-1{
保证金权利：.25rem！重要；
}
.边界暗{
边框颜色：#343a40！重要；
}
.边界{
边框：1px实心#dee26！重要；
}
#fillstodrag分区{
利润率：30px！重要；
背景：白色；
}

这个
观察员认识到
老师是如何好奇的
学生。
好的
健谈的
专业的
安静的
技能

我认为您不需要将填写的答案拖到另一个答案，因为用户有多个选项，可以将每个选项拖到答案上，当用户这样做时，答案将按最新选项修改。这是没有意义的用户拖动选项后下降回答。要执行此方案，您可以这样做：

$（文档）.ready（函数（）{
//此代码用于设置项目的订单属性
var numberOfItems=$（“#选项”）.find（'li'）.length；
$.each（$（“#选项”）.find（'li'），函数（索引，项）{
$（项目）.attr（“订单”，索引）；
var removeBotton=$（''）；
removeBotton。单击（函数（）{
addToOlderPlace（$（this.parent（））；
});
$（项目）。追加（删除）；
});
$（“span”）。可拖放({
接受：“李”，
课程：{
“ui可拖放悬停”：“ui状态悬停”
},
drop：函数（事件、用户界面）{
//检查是否存在其他选项
if（$（this.find（'li'）。长度>0）
addToOlderPlace（$（this.find（'li'））；
$（this.addClass（“ui状态突出显示”）；
$（this.addClass（'matched'）；
$（ui.draggable.find（'i'）.attr（'style'，'）；
$（this.append（$（ui.draggable））；
}
});
$（“li”）。可拖动({
助手：“克隆”，
回复：“无效”
}); 
//此功能用于查找项目的旧位置
函数addToOlderPlace（$item）{
var indexItem=$item.attr（'order'）；
var itemList=$（“#选项”）.find（'li'）；
$item.find（'i'）.hide（）；
如果（indexItem==“0”）
美元（“#期权”）。预支（$项目）；
else if（Number（indexItem）==（Number（numberOfItems）-1））
$（“#选项”）。追加（$项）；
其他的
$（itemList[indexItem-1]）。在（$item）之后；
}
})

li{
列表样式类型：无；
}
跨度{
宽度：100px；
显示：内联块；
高度：27px；
垂直对齐：中间对齐；
边框：1px纯色浅灰色；
}
身体{
字体：13px Verdana；
}
ulli{
显示：内联块；
利润率：0.10px；
填充：10px；
边框：1px纯色浅灰色；
边界半径：10%；
}
p{
填充：10px；
空白：nowrap；
}

好
健谈的
专业的
安静的
技巧
六


观察员认识到
老师是如何好奇的
学生

谢谢，不过，我正在寻找一种使用本机Javascript的方法，但是感谢您花时间在Jquery上实现它。我在dragover等活动上做了很多补充。