如何在 JQuery 中使用 Sortable 对 div 进行水平排序答案

【问题标题】：How to horizontally sort divs using Sortable in JQuery如何在 JQuery 中使用 Sortable 对 div 进行水平排序
【发布时间】：2011-02-02 09:38:57
【问题描述】：

我希望在容器 div 中水平排序我的 div。
我在 JQuery 网站上找到了一个example，但那是垂直排序。我希望它是水平的。

我想在#sortable<div>中进行排序。

请您指导我如何将这种垂直排序转换为水平方式。

CSS

<style type="text/css">
    #draggable1 { width: 150px; height: 35px; padding: 0.5em; }
    #draggable2 { width: 150px; height: 35px; padding: 0.5em; }
    #draggable3 { width: 150px; height: 35px; padding: 0.5em; }

    #sortable { width: 700px; height: 35px; padding: 0.5em; }
</style>

JavaScript

<script type="text/javascript">
    $(function() {  
        $("#sortable").sortable({
            revert: true
        }); 
    });
</script>

HTML

<div class="demo">
    <div id="sortable" class="ui-state-default">
        <div id = "draggable1" class="ui-state-default">Home</div>
        <div id = "draggable2" class="ui-state-default">Contact Us</div>
        <div id = "draggable3" class="ui-state-default">FAQs</div>
    </div>
</div>

【问题讨论】：

我在 vanilla js 中为此制作了一个小脚本：dragsort.js

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

你可以添加这个 CSS 样式：

#sortable>div { float: left; }

它们将是水平的并且仍然可以排序。 You can see a demo of it in action here.

【讨论】：

这是浏览器兼容性的最佳答案。不要忘记使用 float:left 设置占位符的样式。如果您要向列表中添加动态项目，您可能还需要在列表底部管理一个“clear:both”div 以保留列表本身的体积/高度。

【解决方案2】：

虽然float:left有效，但这里我宁愿使用display:inline-table作为div，这样你就不会失去div的体积......

【讨论】：

【解决方案3】：

只需添加到您的 CSS 中：display: inline-block;

【讨论】：