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

Question

我有一个固定的插槽列表(可排序的拖/放目标)，需要接收可排序的项目。该列表分为几个部分。它看起来像这样:

我想做的是能够在不同的插槽中拖动/排序故事，而不是拖动插槽本身。

每个类别的栏位数量是固定的(例如，意见类别中只能有 2 个故事)。故事可以从一个类别拖到另一类别。

我尝试了几种方法...使用单个可排序列表、使用多个列表、对插槽进行排序，但看起来好像只有故事在排序。没有什么是完全正确的。

是否可以在父元素之间拖动子元素并对其进行排序？在本例中，故事是子级，插槽是父级。

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

更新:这是一个 JSFiddle 示例，显示了我正在尝试执行的操作:

https://jsfiddle.net/xzmKZ/6/

<div id="slots" class="block">
  <h4>Top Stories</h4>
  <ul id="sort1" class="slot-group">
    <li class="slot">
        1. <span class="story">This is a Story</span> 
    </li>
    <li class="slot">
        2. <span class="story">This is another Story</span>             
    </li>
    <li class="slot empty">
        3. <span class="story">Yet a Third Story</span>             
    </li>
  </ul>
  <h4>Opinion</h4>                
  <ul id="sort2" class="slot-group">
    <li class="slot empty">
        4. <span class="placeholder">Select a story below</span> 
    </li>
    <li class="slot empty">
        5. <span class="placeholder">Select a story below</span>             
    </li>
  </ul>
  <h4>More Stories</h4>                
  <ul id="sort3" class="slot-group">
    <li class="slot empty">
        6. <span class="placeholder">Select a story below</span> 
    </li>
    <li class="slot empty"
        7. <span class="placeholder">Select a story below</span>             
    </li>
    <li class="slot empty">
        8. <span class="placeholder">Select a story below</span>             
    </li>
  </ul>
</div>

h4 { font-weight: bold; margin: 0 0 5px; }
.slot { background: #eee; padding: 5px; margin: 0 0 5px }
.placeholder { color: #aaa }

  // Initialize sortable
  $("#sort1, #sort2, #sort3").sortable({
    items: '.slot span',
    containment: '#slots',
    axis: 'y',
    cursor: 'move',
    connectWith: '.slot-group',
    cancel: '.placeholder'
    });
  $("#slots").disableSelection();

Answer 1

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

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

这是一个jsFiddle demo :