javascript - 在 HTML 中，如何创建一个内容超出边框且可拖动的 div？

Question

警告：我完全不知道我要查找的词汇是什么。

我有以下页面（jsfiddle），其中包含一棵节点树（家谱）。

树可能会变得非常大，因此会出现不理想的显示，以适应容器 div。小提琴中的 div 限制通过以下方式模拟：

.tree {
    max-width: 500px;
}

我想实现两个目标：

• 确保即使树的宽度大于容器的宽度，它也会溢出 div 边界。

我已经查看了溢出 css 关键字，但我不明白我应该把它放在哪个元素上。

例如，当把它放在树类中时，节点保持在预定义的 div 大小：

.tree {
  max-width: 500px;
  overflow: scroll;
}

• 允许拖动（可能溢出的）div 的内容以浏览树（我不知道该怎么做，因为我需要先实现上述点......（可拖动关键字？））

你能根据我的 jsfiddle 给我方向吗？

标签： javascripthtmlcss

Answer 1

好的，我认为最好的解决方案是给第一个 ul 一个绝对位置并将树设置为overflow: hidden;.

然后你需要在树上添加一个鼠标/指针监听器来监听你的鼠标被拖动。侦听器将根据您的鼠标拖动更改第一个 ul 的位置，因此您正在树周围移动。