使用jQuery UI Sortable对固定占位符目标进行排序

我有一个固定的插槽列表（可排序的拖放目标），需要接收可排序的项目。该列表分为几个部分。看起来是这样的：

我想做的是能够跨不同的窗口拖动/排序故事，而不是拖动窗口本身

每个类别的时段数是固定的（例如，意见类别中只能有2个故事）。故事可以从一个类别拖到另一个类别

我试过几种方法。。。使用单个可排序列表，使用多个列表，对插槽进行排序，但使其看起来似乎只有故事在排序。没有什么事情是完全正确的

是否可以跨父元素拖动和排序子元素？在本例中，故事是子故事，插槽是父故事

或者有人对另一种方法有什么建议吗

更新：下面是一个JSFIDLE示例，展示了我正在尝试做的事情：

头条新闻


1.这是一个故事


2.这是另一个故事


3.还有第三个故事


意见


4.在下面选择一个故事


5.在下面选择一个故事


更多故事


6.在下面选择一个故事

我会让每个类别都有自己的ul。然后，应将选择器传递到connectWith选项：

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
});

这是一个：
谢谢。我已经试过了，但这只允许将插槽从一个列表拖到另一个列表。它没有解决两个主要目标：拖动故事（而不是插槽）并保持每个类别中插槽的数量固定。（例如，第三个故事不能添加到意见类别）。啊，那么我的回答对你没有帮助。我认为您可能需要编写更多的代码，我将研究使用可拖放和可拖放交互。它们应该允许您在拖动元素（拖放表）的同时保留插槽（作为拖放目标）。