jQuery 可排序逻辑

Question

利用这个想法，我每轮有 4 个槽位(很多轮，分页)。从人员列表中拖动时，我想替换占位符并将列表中的项目数限制为 4。

那么，是使用连接的可排序列表更好，还是自定义可拖放插件更好？

我可以了解基础知识，但我很难让这种感觉正确，因为它感觉太像 jQuery-UI 可排序列表，并且没有放入插槽/替换选择占位符...

建议？

Answer 1

已更新

  var sorting = false;
  var pickArray = [];
  $('.picks-group li').each(function(){
      pickArray.push($(this).text());
  });
  $('.picks-group li').droppable({
      drop: function (event, ui) {
          if(!sorting)
              $(this).text(ui.helper.text()).addClass('done');
      }
  });
  $('#players-list li').draggable({
      helper: 'clone',
      revert: 'invalid'
  });
$('.picks-group').sortable({
     start: function (event, ui) {
         sorting = true;
      },
      stop: function (event, ui) {
          sorting = false;    
      },
      change: function (event, ui) {
          $(this).find('li').not('.ui-sortable-helper').each(function(index){
              if(!$(this).hasClass('done'))
                  $(this).text(pickArray[index]);
          });
      }
});
$('.picks-group li').mousedown(function(){
    if(!$(this).hasClass('done'))
        return false;
});

示例:

FIDDLE