可拖动和可排序的Portlets // jQuery

Question

试图找出但仍无法找到一种方法，我可以为少数可拖动的portlet制作一个可放置和可排序的目标。 我基于这个教程： http://jqueryui.com/sortable/#portlets

我要做的是

我的想法是将小portlet拖入大红色portlet（我已经成功了）但是我希望通过水平对齐来实现（意味着排序，而不仅仅是将它放在任何地方），我也成功地将它做成verticaly，对我不好（

我当前的js代码看起来像这样（已尝试过不同的组合）：

    $(function() {
    $( "#draggablegrey" ).draggable({   });

    $( "#draggableblue" ).draggable({
     connectWith: '#droppable',


    });

 $( "#droppable" ).sortable({
     connectWith: '#droppable'  }); });

Answer 1

来自jQuery UI的网站： - ＆gt; ＆＃34; Draggables可以与sortables无缝交互。＆＃34;

您可以尝试从jQuery UI中关注此示例：http://jqueryui.com/draggable/#sortable

另外，为了水平排序，在你的风格中添加一行css：

#sortable>div { float: left; }

之后你应该能够移动它们并水平排序。

这个小提琴来自其他人http://jsfiddle.net/sP3UZ/