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

Posted 2023-05-08

【中文标题】可拖动和可排序的 Portlet // jQuery

【英文标题】：Draggable and Sortable Portlets // jQuery

【发布时间】：2014-01-08 08:30:21

【问题描述】：

试图弄清楚但仍然无法找到一种方法，如何为几个可拖动的 portlet 创建一个可放置和可排序的目标。 我基于本教程： http://jqueryui.com/sortable/#portlets

我想做的是

这个想法是将小portlet拖入大红色portlet（我已经成功做到了），但我想通过水平对齐来做到这一点（意味着排序，而不仅仅是把它放在任何地方），我也成功做到垂直，对我不好（

我当前的 js 代码如下所示（已经尝试过不同的组合）：

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

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


    );

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

【参考方案1】：

来自 jQuery UI 的网站：->“Draggables 被构建为与 sortables 无缝交互。”

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

还可以在您的样式中添加一行 css 以进行水平排序：

#sortable>div  float: left; 

在此之后，您应该能够移动它们并对其进行水平排序。

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