jquery-ui - jQuery垂直方向に1つの位置でのみ並べ替え可能

Question

jQueryの並べ替え可能なリストを制限して、ユーザーが一度に1つの位置だけドラッグできるようにしようとしています。たとえば、複数のliをスキップせずに、リスト内の1つの位置だけを上下に移動できます。これは可能ですか？次の方法で、垂直方向のドラッグを非常に簡単に実装できます。

$( "#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も参照してください。