如何使用JQuery中的Sortable来水平排列div

前端之家收集整理的这篇文章主要介绍了如何使用JQuery中的Sortable来水平排列div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找在容器div水平排列我的div。我在JQuery网站上发现了一个 example,但这是垂直排序。我想要水平

我想在#sortable Div中进行排序。

请指导我如何以水平的方式转换这个垂直排序。

CSS

@H_403_8@<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的

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

HTML

@H_403_8@<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>

截图
alt text http://i40.tinypic.com/351xsfc.jpg

解决方法

您可以添加此CSS样式: @H_403_8@#sortable>div { float: left; }

他们将是水平的,仍然可以排序。 You can see a demo of it in action here

猜你在找的jQuery相关文章