可水平拖动 / 可移动 <div>

Posted 2023-05-08

【中文标题】可水平拖动 / 可移动 <div>

【英文标题】：draggable / moveable <div> horizontally

【发布时间】：2013-03-25 23:27:06

【问题描述】：

如何制作可水平拖动/移动但不能垂直移动的 div？ 如果这可以在没有 JQuery UI 的情况下完成，我会更喜欢。 jQuery 很好。或者香草JS。

【参考方案1】：

自己创建这样的行为需要相当多的工作。我建议使用 jquery ui：

http://jsfiddle.net/basarat/f7nNf/1/

一行代码：

$( "#draggable" ).draggable( axis: "x" );

而且您不需要下载完整的 jquery ui。您可以在此处进行仅可拖动的自定义构建：http://jqueryui.com/download/

在此处阅读有关可拖动的更多信息：http://jqueryui.com/draggable/#constrain-movement

【讨论】：

我不知道可以定制 jQuery UI。我不使用 jQuery UI 的原因是它的大小。谢谢分享。

使用 jquery ui 而不是自己构建它的好建议 - 为我节省了大量时间（而且很可能是心痛）！

原始海报要求提供纯 JS 答案。这不应该是公认的答案