jquery-ui - jQuery 只能按一个位置垂直排序

Question

我试图限制 jQuery 可排序列表，以便用户一次只能拖动一个位置，例如，您只能在列表中向上或向下移动一个位置，而不能跳过多个 li。这可能吗？通过具有以下功能，我可以很容易地实现垂直拖动：

$( "#sortable" ).sortable({
        containment: 'parent',
        axis: 'y'
});

有任何想法吗？谢谢

Answer 1

这个想法是在 mousedown 事件中重新安装 sortable.items：

$(function() {
$( "#sortable1" ).sortable({
  items: "li:not(.ui-state-disabled)",
  start: function (event, ui) {$( "#sortable1" ).sortable({items: ">*"})},
  stop: function (event, ui) {$( "#sortable1" ).sortable({items: ">*"})}
});

$( "#sortable2" ).sortable({
  cancel: ".ui-state-disabled"
});

$( "#sortable1 li, #sortable2 li" ).disableSelection();     
});

$('#sortable1 li').one('mousedown', function(e) {
$('#sortable1 li').removeClass("ui-state-disabled");
var downID = $(this).attr("id");
var priorItem = null;
var currentItem = null;
var nextItem = null;
var currentID = null;
var skipIteration = false;
$("#sortable1 li" ).each(function( index ) {
$(this).addClass("ui-state-disabled");
if (!skipIteration)
{
    if (!(currentItem == null))
    {
      nextItem = this;
      skipIteration = true;
    }

    if (!skipIteration)
    {
      currentID = $(this).attr("id");
      if (downID == currentID)
      {
        currentItem = this;
        //alert(currentID);
      }
      else
      {
          priorItem = this;
      }
    }
}

});  

if (priorItem !== null)
{
   $(priorItem).removeClass("ui-state-disabled");
}
if (currentItem !== null)
{
   $(currentItem).removeClass("ui-state-disabled");
}
if (nextItem !== null)
{
   $(nextItem).removeClass("ui-state-disabled");
}

$( "#sortable1" ).sortable({items: "li:not(.ui-state-disabled)"})

});

http://jsfiddle.net/qnT6x/2/

另请参阅：http: //jqueryui.com/sortable/#items