Javascript 可拖动文本编辑器

我正在尝试构建一个文本编辑器，可以使用jQuery的拖放功能进行处理。我已经能够构建可拖动的项目，比如文本框、图像（现在是占位符），并将它们放入可排序的容器中；并移除掉在垃圾箱或移除棒上的任何元素。然而，拖放的执行方式看起来有些尴尬。 例如，当我将一个可拖动的项目从其容器中拖出时，容器会随着我的拖动而展开；容器中拖放的项目的排序方式与我在其他示例中看到的有所不同。 如何解决这些问题？ jQuery的draggable/sortable听起来像是用于这个项目的好技术吗

一旦我解决了这个问题，我计划实现一些功能，允许用户选择颜色、文本对齐、图像源，最终还有投票功能。 此外，我希望能够导出任何用户构建的文本编辑器，以保存在db中并发布。 关于如何处理这些问题，我能有一些好主意吗

我在这里附上JSFIDLE和代码。 非常感谢你的帮助

代码段（单击打开，隐藏以获得更好的视觉效果）：

var elementID=”“；
const textBox=“”；
const imageBox=“”；
const粘贴框=”；
$（文档）.ready（函数（）{
//可调整大小并可拖动的文本框
$（“#容器”）。可排序({
回复：真
});
//拖动文本时添加文本框
$（“#textDrag”）.mousedown（函数（）{
elementID=“text”；
console.log（elementID）；
});
//拖动图像时添加imagebox
$（“#imageDrag”）.mousedown（函数（）{
elementID=“image”；
console.log（elementID）；
});
//拖动标签时添加标签
$（“#粘贴拖动”）.mousedown（函数（）{
elementID=“贴纸”；
console.log（elementID）；
});
//删除删除的元素
$（'#removeDrop'）。可拖放({
结束：功能（事件、用户界面）{
ui.draggable.remove（）；
}
});
$（'.dragItem'）.draggable({
connectToSortable:“#容器”，
回复：“无效”，
助手：函数（）{
if（elementID==“text”）
返回文本框；
else if（elementID==“image”）
返回图像框；
其他的
回收箱；
}
});
})

/*总体布局样式*/
* {
框大小：边框框；
}
身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
dragDrop先生{
身高：100%；
宽度：20%；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：居中；
}
dragDrop a{
颜色：白色；
填充：16px；
文字装饰：无；
显示：块；
}
.dragDrop a:悬停{
背景色：#ddd；
颜色：黑色；
}
.内容{
左缘：20%；
填充：0 1rem；
}
/***************************************************/
/*dragDrop div元素样式*/
德拉格德罗普分区{
宽度：100%；
身高：100%；
颜色：白色；
填充：1rem；
文本对齐：居中；
}
.dragDrop分区：悬停{
背景色：#ddd；
颜色：黑色；
}
德拉吉特姆分区{
高度：自动；
}
dragItem先生{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
/***************************************************/
/*内容div元素样式*/
#容器{
最大宽度：100%；
最小高度：30雷姆；
高度：自动；
页边顶部：1rem；
垫底：1毫米；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
#主题{
宽度：100%；
}
.拖拉{
页边顶部：1rem；
}
input.DRAGABLE{
最小宽度：100%；
最大宽度：100%；
最小高度：5雷姆；
}
#钮扣容器{
宽度：100%；
页边顶部：1rem；
边缘底部：3rem；
显示器：flex；
证明内容：之间的空间；
}
#除去{
背景色：黑色；
颜色：白色；
身高：7雷姆；
文本对齐：居中；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

正文
形象
贴纸
去除

像这样的吗？为什么不从HTML5开始呢？