Javascript CSS-调整大小和溢出隐藏属性都不是'；t使用绝对位置工作

我正在做一个小项目，用HTML和JS来练习拖放，我在一个容器“x”中有4个div（其中有图像），另一个容器“y”将这些div拖放到容器“y”中，但是如果我把它们都拖到那里，第一个div只会设置在左上角，其余的就在它们下面（或者，如果我将它们的显示设置为内联块，则它们彼此相邻）。因此，我想使这些div在我拖入的容器“y”上可移动，以便将它们移动到我需要的任何位置。这些div可以通过resize:auto和overflow:hidden调整大小（我尝试了hidden、auto和visible，但都是相同的，不起作用）

为了获得拖拽和移动功能，我使用了W3schools的教程，我为所有div创建了4个函数，除了ID和函数名不同之外，其他都是一样的。现在，这个函数打破了调整大小的功能，因为我给div一个position:absolute，使它们可以移动，这就是CSS的那一行和JS的一些帮助这破坏了这一特性。我写了以下一些主要代码：

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
ev.dataTransfer.dropEffect=“移动”；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
var drag1=document.getElementById（“drag1”）；
var drag2=document.getElementById（“drag2”）；
var drag3=document.getElementById（“drag3”）；
var drag4=document.getElementById（“drag4”）；
dragElement1（drag1）；
dragElement2（drag2）；
dragElement3（drag3）；
dragElement4（drag4）；
功能dragElement1（elmnt）{
变量pos1=0，pos2=0，pos3=0，pos4=0；
if（document.getElementById（elmnt.id））{
/*如果存在，则标题是从中移动DIV的位置：*/
document.getElementById（elmnt.id）.onmousedown=dragMouseDown；
}否则{
/*否则，请从DIV内的任何位置移动DIV：*/
elmnt.onmousedown=dragMouseDown；
}
功能下拉列表（e）{
e=e | | window.event；
e、 预防默认值（）；
//在启动时获取鼠标光标位置：
pos3=e.clientX；
pos4=e.clientY；
document.onmouseup=关闭DrageElement；
//每当光标移动时调用函数：
document.onmousemove=elementDrag；
}
功能元素拖动（e）{
e=e | | window.event；
e、 预防默认值（）；
//计算新光标位置：
pos1=pos3-e.clientX；
pos2=pos4-e.clientY；
pos3=e.clientX；
pos4=e.clientY；
//设置元素的新位置：
elmnt.style.top=（elmnt.offsetTop-pos2）+“px”；
elmnt.style.left=（elmnt.offsetLeft-pos1）+“px”；
}
函数closeDrageElement（）{
/*释放鼠标按钮时停止移动：*/
document.onmouseup=null；
document.onmousemove=null；
}
}/*其他3个函数相同，只是ID和函数名不同*/

#图像容器。调整大小{
位置：绝对位置；
排名：0；
左：0；
最大宽度：600px；
宽度：200px；
最大高度：200px；
高度：140像素；
调整大小：两者都有！重要；
溢出：自动！重要；
填充：10px；
边界半径：4px；
}//CSS中唯一存在此问题的部分

你能添加一个有效的例子吗？你有没有尝试过在绝对放置的元素上隐藏溢出？@RauliRajande我在Codepen上做了一个有效的例子：我知道，CSS有点不好，因为我现在没有专注于样式。我尝试了隐藏、自动和可见，结果相同。函数“dragMouseDown（e）”行“e（）；“不允许开始调整大小。最好的解决方案是实现某种大小调整（或拖动）句柄。”因为这些操作在原则上相互冲突。@RauliRajande好的，谢谢，我认为它来自函数，但不确定来自哪一行。那么，我如何做那个句柄？不确定如何做。两个事件（拖动/调整大小）通过在元素上单击

触发。因此，它们都试图同时发生。这就是问题的原因。我可以帮助您优化现有代码。首先，您使用4个不同的函数
dragElement1、dragElement2…
。您可以使用一个函数，并使用不同的属性调用它4次例如，对于eg
dragElement（elem1）；dragElement（elem2）等，每个函数都不需要一个函数。但更好的解决方案是只使用一个func，只调用一次。有关这一点，请参见此处-