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

jQuery只能垂直排序一个位置

1 个答案: