如何使 div 元素既可滚动又可拖动以用于内部内容？答案

【问题标题】：How can I make a div element both scrollable and draggable for the inner content?如何使 div 元素既可滚动又可拖动以用于内部内容？
【发布时间】：2013-04-19 18:04:32
【问题描述】：

我遇到了一个问题，我在网页上布置了一个游戏板。如果这个游戏板是 20x20 的方格并且它的容器只能容纳 10x10，我需要里面的游戏板是可拖动的。用户不应将其拖出容器的边界（因为 0,0 瓷砖不应通过容器的左上角，而 19,19 瓷砖不应高于或左侧 o容器的右下角）。

jQuery UI 有一个可拖动的元素，可以让我拖动它，但我能做出的唯一约束似乎完全与容器本身有关。我通过设置边界（使用 [x1, y1, x2, y2] 格式而不是容器）解决了这个问题，并且工作了一段时间 - 除了拖动速度很慢并且不适用于可滚动的解决方案。

我的可滚动字段问题（没有拖动）将滚动条放在内容中，看起来很乱。

是否有一个很好的可拖动解决方案，可以惯性滚动到元素？滚动是唯一的方法吗？我真的只能在一个或另一个之间切换吗？

谢谢！

【问题讨论】：

标签： jquery css draggable scrollable

【解决方案1】：

是否尝试过使用 css 元素“滚动：自动”？

【讨论】：

是的。也许我在回答中解释得不够清楚，但我正在寻找一种既可拖动又可滚动的解决方案——而不是根据大小触发的解决方案。滚动属性的问题是滚动和拖动不能使用 jQuery UI 一起正常工作。