Javascript 移动一个容器和里面的所有子容器

我无法正确地将“父”框拖动到页面上的另一点。 如果我没有启用

e.preventDefault

，浏览器将通过移动元素而忽略范围上的方向，而不重新创建另一个容器。 我需要能够正确地移动容器。父亲，我该怎么做？ 实时代码是

var-span；
变种克隆；
变量id；
window.onload=函数（）{
id=document.getElementsByClassName（'father'）[0]；
var b=document.body；
id.addEventListener（“dragstart”，dragstart，false）；
id.addEventListener（“dragend”，dragend，false）；
b、 addEventListener（'drop'，函数（事件）{
DROP（事件）
}，假）；
}
函数dragStart（）{
span=document.getElementsByClassName（'father'）[0]；
clone=span.cloneNode（真）；
}
函数dragEnd（）{
if（document.getSelection）{
range=window.getSelection（）.getRangeAt（0）；
range.insertNode（克隆）；
}
}
函数drop（e）{
e、 预防默认值（）；
}

第一段

第二段
正文

您可以试试这个。这很好用…检查一下是否对你有帮助

var-makeMove；
x0=0；
y0=0；
功能移动（e）{
如果（makeMove）{
x1=e.clientX；
y1=e.clientY；
cx=x0+x1-x；
cy=y0+y1-y；
document.getElementById（“main”）.style.left=cx+“px”；
document.getElementById（“main”）.style.top=cy+“px”；
e、 预防默认值（）；
}
}
功能鼠标（e）{
makeMove=false；
x0=cx；
y0=cy；
}
功能鼠标向下（e）{
makeMove=true；
x=e.clientX；
y=e.clientY；
}

第一段

第二段
正文

此解决方案在我的情况下不起作用：我必须按照文本移动容器，它必须是文本的一部分。