Блог

У меня есть фиксированный список слотов (сортируемые цели перетаскивания), которые должны получать сортируемые элементы. Список сгруппирован в несколько разделов. Это выглядит так:

Что я хотел бы сделать, так это иметь возможность перетаскивать / сортировать истории по разным слотам, в отличие от перетаскивания самих слотов.

Количество слотов для каждой категории фиксировано (например, в категории мнений может быть только 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();
 

Я бы сделал для каждой из категорий свой собственный ul. Затем вы должны передать селектор в опцию connectWith:

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

Вот демонстрационная версия jsFiddle: