Javascript 拖放<；span>；使用JQuery创建段落

我需要将

拖放到

。我的代码正常，但我有3个问题

当我通过键入内容（假设有三个单词）编辑

内容时，将

拖动到

后，新键入的单词充当一个单词。因此，无法在这些新键入的内容之间删除可拖动的组件

关闭后，添加的可拖动组件（通过单击

X

）在两个单词之间保留两个空格

无法将可拖动组件作为段落的1个单词删除

为了整理第三期，我在第一段增加了

。它被分类了

<p class="given" contenteditable="true">&nbsp; Lorem Ipsum is simply dummy</p>

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，Lorem Ipsum只是印刷和排版行业的虚拟文本

达科他州桑蒂酒店
美国
卡塔尔
菲律宾

要解决第一个问题，您可以在用户每次输入文本或对文本区域进行消焦时“重现”单词。我建议您在每次用户停止编辑文本区域或每次用户进入空间时重新映射/剪切您的文字（不过这会运行得更频繁）

第二个问题可以通过简单地循环文本并在检测到一行中有多个文本时删除（例如，使用regex）来解决

你应该只根据你所面临的实际问题提出实际的、可回答的问题。喋喋不休的开放式问题削弱了我们网站的实用性，并将其他问题推到了头版

你的问题应该有合理的范围。如果你能想象一整本书都能回答你的问题，那你问得太多了

$（函数（）{
函数textWrapper（str、sp、btn）{
如果（sp==未定义）{
sp=[0,0]；
}
var txt=“”；
如果（btn）{
txt=”“+str+”；
}否则{
txt=”“+str+”；
}
如果（sp[0]）{
txt=”“+txt；
}
如果（sp[1]）{
txt=txt+“”；
}
返回txt；
}
虚词（p）{
var words=p.split（“”）；
单词[0]=textWrapper（单词[0]，[0,1]）；
var i；
for（i=1；i.ui图标），函数（）上{
$（this.parent（）.remove（）；
});
$（“p.given”）.blur（函数（）{
var w=未排序的单词（$（此））；
控制台日志（w）；
$（this.html（chunkWords（w））；
makeDropText（$（“p.给定span.w”）；
});
$（“给定跨度”）.draggable({
助手：“克隆”，
回复：“无效”
});
makeDropText（$（“p.给定span.w”）；
});
p{
显示器：flex；
柔性包装：包装；
}
p、 给定span.w span.ui-icon{
光标：指针；
}
空白处{
显示：内联块；
最小宽度：50px；
边框底部：2倍实心#000000；
颜色：#000000；
}
div.blanks.ui-droppable-active{
最小高度：20px；
}
span.答案>b{
边框底部：2倍实心#000000；
}
给定的跨度{
保证金：5px；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。[Lorem]Ipsum自15世纪以来一直是行业标准的虚拟文本，Lorem Ipsum只是印刷和排版行业的虚拟文本

达科他州桑蒂酒店
美国
卡塔尔
菲律宾
您能提供示例代码对其进行排序吗？请注意，我在这里使用的不是，你可能真的想回去看看我对TinyMCE的建议：@Twisty问题是先生，我不能使用TinyMCE，不能使用这样的第三方，你能告诉我如何至少请帮我解决我提到的第一个问题吗sir@Twisty在这个回答中,，你建议我调用
$（$p.given”）.html（chunkWords（$（$p.given”）.text（））在特定事件中再次出现。我不清楚，你能给我一个完整的答案吗。PLS但现在在拖放后，可拖动内容关闭
X
不起作用。你能解释为什么吗？还有n