Javascript 文本可以移动但不能删除部分文本的区域

以上就是我想要创造的。必须有一段文本始终位于文本区域。可以将其拖动到文本区域的其他部分，但不能将其删除。您可以在它之前和之后键入

---

几天来，我一直在努力寻找实现这一目标的最佳方法，但最终还是失败了。有人有想法吗？

首先，使用

contentEditable

父元素，

div

将

input type=“text”

元素的

属性设置为
“true”
<代码>待办事项：

拖放调整；当前仅使用

.appendChild

将包含

输入的
div
拖放到父
div
，而不在父
内容可编辑的
div中的可编辑文本之间放置
可拖动的
元素


输入{
颜色：淡蓝色；
字号：28px；
字体大小：粗体；
字体系列：arial；
背景：无；
边界：无；
宽度：220px；
填充：0px；
边际：0px；
位置：相对位置；
显示：内联块；
}
div[droppable=“true”]{
宽度：450px；
高度：300px；
边框：1px实心#000；
}
div[draggable=“true”]{
宽度：250px；
}
div[draggable=“true”]：悬停{
光标：指针；
}

函数dragstartHandler（e）{
//向数据传输对象添加'input'元素的名称
e、 dataTransfer.setData（“text/plain”，例如target.firstElementChild.name）；
}
函数dropHandler（e）{
e、 预防默认值（）；
//获取目标的'name'，并将移动的元素添加到目标的DOM中
var data=e.dataTransfer.getData（“文本”）；
e、 target.appendChild(
document.querySelector（“输入[name=“+data+”]”）parentElement
);
}
document.ondragover=函数（事件）{
//防止默认值以允许删除
//TODO:将`input`parent`div`元素放在`contentEditable`文本之间
event.preventDefault（）；
console.log（事件）
};
此文本可以编辑
这里的这个也可以
一个开始，使用
contentEditable
父元素，
div
将
input type=“text”
元素的
属性设置为
“true”
<代码>待办事项：
拖放调整；当前仅使用
.appendChild
将包含
输入的
div
拖放到父
div
，而不在父
内容可编辑的
div中的可编辑文本之间放置
可拖动的
元素


输入{
颜色：淡蓝色；
字号：28px；
字体大小：粗体；
字体系列：arial；
背景：无；
边界：无；
宽度：220px；
填充：0px；
边际：0px；
位置：相对位置；
显示：内联块；
}
div[droppable=“true”]{
宽度：450px；
高度：300px；
边框：1px实心#000；
}
div[draggable=“true”]{
宽度：250px；
}
div[draggable=“true”]：悬停{
光标：指针；
}

函数dragstartHandler（e）{
//向数据传输对象添加'input'元素的名称
e、 dataTransfer.setData（“text/plain”，例如target.firstElementChild.name）；
}
函数dropHandler（e）{
e、 预防默认值（）；
//获取目标的'name'，并将移动的元素添加到目标的DOM中
var data=e.dataTransfer.getData（“文本”）；
e、 target.appendChild(
document.querySelector（“输入[name=“+data+”]”）parentElement
);
}
document.ondragover=函数（事件）{
//防止默认值以允许删除
//TODO:将`input`parent`div`元素放在`contentEditable`文本之间
event.preventDefault（）；
console.log（事件）
};
此文本可以编辑
这里的这个也可以
好的开始！这比我能得到的还要远。。。然而，我的问题是，这个答案是“但这不能”的文本仍然可以删除，这是我试图避免的最大的事情之一伟大的开始！这比我能得到的还要远。。。然而，我对这个答案的问题是，“但这不能”的文本仍然可以删除，这是我试图避免的最大的事情之一