我真的试图找到答案，但没有什么能接近。我希望能够对句子重新排序，即拖放它们。但我也希望它们是可编辑的。哦，是的，最好没有jquery之类的...
如果需要在编辑和重新排序之间切换，例如"ctr"键切换内容可编辑。但是我无法弄清楚拖动事件如何确定放下它的位置。
<!DOCTYPE html>
<html>
<style>
.sentence1 {color: blue;}
.sentence2 {color: red;}
.sentence3 {color: green;}
</style>
<body>
<div class="paragraph">
<span id="three" class="sentence3" contenteditable="true" >This is really the third sentence.</span>
<span id="one" class="sentence1" contenteditable="true" >This is really the first sentence.</span>
<span id="two" class="sentence2" contenteditable="true" >This is really the second sentence.</span>
</div>我认为如果解决，这可能对某些人有用，所以我没有提供更多我尝试和失败的代码。欢迎任何建议！
我准备了一个小沙盒供您摆弄。底部的小提琴链接。
var SPANs = document.getElementsByTagName("span");
document.body.addEventListener("keydown", function (event) {
if (event.key === "Control") {
Array.prototype.forEach.call(SPANs, function (item) {
item.setAttribute("contenteditable", false);
});
}
});
document.body.addEventListener("keyup", function (event) {
Array.prototype.forEach.call(SPANs, function (item) {
item.setAttribute("contenteditable", true);
});
});
Array.prototype.forEach.call(SPANs, function (item) {
item.addEventListener("drag", function (event) {
console.log("Moving element");
}, false);
});
摆弄一小段JS代码
要使某些内容可拖放...(这可能相当长，所以只是列出步骤，而不是代码，如果其他人有精力写出来，不会责怪你从中做出另一个答案。
第 1 步。当鼠标/触摸向下时，使div 位置弹出到向上 z，并根据鼠标/触摸位置相对于窗口移动位置。
第 2 步。让所有潜在的放置位置在mouseenter或等效位置上侦听(通常是javascript在现有位置之间临时设置1或0高度div(。如果鼠标输入/等效，则使它们处于活动状态。如果鼠标/触摸离开，请使其处于非活动状态。
步骤 3a.如果在潜在放置div 处于活动状态时鼠标向上/结束触摸，请将其替换为范围。
步骤 3b.如果在没有潜在放置div 处于活动状态时鼠标向上/结束触摸，请删除临时div 并将拾取的div 放回原处。
(注意：到目前为止，相当多的移动浏览器还不支持拖动javascript。一旦几年后，那可能会是更好的路线(
因此，即使可行，我提出上述问题的方式似乎也相当复杂。
我认为使用例如可排序.js(非jquery(是一种途径。
我最终尝试使用 vue 做一些事情，原因是更容易保留数据对象进行排序和编辑，并在需要时使用虚拟 doms 根据需要显示。谢谢大家的建议！