修改可排序的JQuery UI Portlet以水平拖动

可以编程哪些额外的jquery函数来使portlet/widget在更宽的列中水平移动（默认方式仅允许portlet在其自己的列中垂直放置，但如果列被加宽则不允许水平放置），以便列也可以允许水平放置

我想让用户将玩家卡拖放到他们选择的相关团队类别/分区中，堆叠在一起，如下面的原始示例所示：

第一类 第2类 第3类 等等……等等

我希望在我的页面中实现jqueryui的一个片段

$（函数（）{
$（“.column”）.sortable({
连接到：“.column”，
句柄：“.portlet头”，
取消：“.portlet切换”，
占位符：“portlet占位符ui角点全部”
});
$（“.portlet”）
.addClass（“ui小部件ui小部件内容ui帮助程序clearfix ui角点全部”）
.find（“.portlet头”）
.addClass（“ui小部件标题ui角点全部”）
.prepend（“”）；
$（“.portlet切换”）。单击（函数（）{
var icon=$（这个）；
toggleClass（“ui图标+ui图标+图标图标”）；
icon.closest（“.portlet”）.find（“.portlet内容”）.toggle（）；
});
});
正文{
最小宽度：520px；
字体系列：“投石机MS”、“Helvetica”、“Arial”、“Verdana”、“无衬线”；
字体大小：62.5%；
}
.栏目{
宽度：170px；
浮动：左；
填充底部：100px；
}
.portlet{
利润率：0.1米1米0；
填充：0.3em；
}
.portlet头{
填充：0.2em 0.3em；
边缘底部：0.5em；
位置：相对位置；
}
.portlet切换{
位置：绝对位置；
最高：50%；
右：0；
利润上限：-8px；
}
.portlet内容{
填充：0.4em；
}
.portlet占位符{
边框：1px点黑色；
利润率：0.1米1米0；
高度：50px；
}

喂养
Lorem ipsum dolor sit amet，一位杰出的领导者
新闻
Lorem ipsum dolor sit amet，一位杰出的领导者
购物
Lorem ipsum dolor sit amet，一位杰出的领导者
链接
Lorem ipsum dolor sit amet，一位杰出的领导者
图像
Lorem ipsum dolor sit amet，一位杰出的领导者
链接
Lorem ipsum dolor sit amet，一位杰出的领导者
图像
Lorem ipsum dolor sit amet，一位杰出的领导者
链接
Lorem ipsum dolor sit amet，一位杰出的领导者
图像
Lorem ipsum dolor sit amet，一位杰出的领导者
是否要在放置位置超出列时动态创建列？实际上不是这样。当列宽被赋予更宽的px时，Portlet在其相同的列中不会彼此移动，它们只允许垂直移动。让我重新表述一下，当列宽被赋予更宽的px时，Portlet在其相同的列中不能彼此移动，它们只允许垂直放置（默认方式只允许在它们自己的列中垂直放置Portlet，但如果列加宽，则不允许水平放置）–在共享示例中水平拖动非常有效。我错过什么了吗？
| card 1   card 2   card 3   etc   etc |

| card 4   card 5   card 6   etc   etc |

| card 10   card 12   card 13   etc   etc |