jqueryui，替换并向下推项，而不是排序

我是JQuery新手，试图了解如何扩展可排序UI

我想要实现的是：

我有一张单子

| A | B | C | . | E | F | G | H |

在哪里。被认为是一个空洞。 如果我将A拖动到B，而不是交换看起来像

| B | A | C | . | E | F | G | H |

• 我希望它看起来像（A推到B（原来的A点打开），B推 到C，C推到打开位置）
  ||A | B | C | E | F | G | H|

• 另一个例子是，如果我把B推到C，它就变成了
  |A |.|B | C | E | F | G | H|

• 同样，如果我把E推到F，因为H的右边没有一个打开的槽，应该有一个警告，说不能移动

这是我到目前为止所做的，你们可以重复使用

---

我想这就是你想要的：

$(function() {

    var start_pos = 0;
    var start_offset = 0;

    $("#sortable").sortable({
        tolerance: "pointer",
        cancel: ".empty_spot",
        start: function(event,ui){
            start_pos = $(ui.item).index();
            start_offset =  ui.originalPosition.left;
        },
        change: function(event,ui){
            if(ui.position.left > $(ui.item).parent().find(".empty_spot").offset().left){
                alert("Can't move");
                return false;
            }
            else{
                var offset = start_pos;
                if(ui.position.left < start_offset){
                    offset += 1;
                }
                else{
                    offset += 2;
                }  

                var empty_spot = $(ui.item).parent().find(".empty_spot");
                empty_spot.insertBefore(empty_spot.siblings(':eq('+start_pos+')'));
                $("li:eq("+offset+")").insertAfter($("li:eq("+(offset+1)+")"));
                $("#sortable").sortable("refreshPositions");
            }
        }
    });

    $( "#sortable" ).disableSelection();
});

$（函数（）{
var start_pos=0；
var start_offset=0；
$（“#可排序”）。可排序({
公差：“指针”，
取消：“.空位”，
开始：功能（事件、用户界面）{
start_pos=$（ui.item）.index（）；
开始偏移=ui.originalPosition.left；
},
更改：功能（事件、用户界面）{
if（ui.position.left>$（ui.item.parent（）.find（“.empty_spot”）.offset（）.left）{
警报（“无法移动”）；
返回false；
}
否则{
var偏移=开始位置；
如果（ui.position.left<开始偏移）{
偏移量+=1；
}
否则{
偏移量+=2；
}  
var empty_spot=$（ui.item）.parent（）.find（“.empty_spot”）；
empty_-spot.insertBefore（empty_-spot.sillides（':eq（'+start_-pos+'）））；
$（$（li:eq（“+offset+”））。后面插入（$（$（$（li:eq（“+（offset+1）+”）））；
$（“#可排序”）。可排序（“刷新位置”）；
}
}
});
$（“#可排序”）.disableSelection（）；
});

---

这是你的电话号码。也许它并不完美，但它确实是：）

哇，太棒了！！！刚刚测试过，但D到空槽显示无法移动消息，这不应该是这种情况。我认为原因在于（ui.position.left>$（ui.item）.parent（）.find（“.empty_spot”）.offset（）.left），其中您几乎说移动的LI的左位置大于空位置，然后引发Msg。对吗？没错。我也不知道如何管理像F到C这样的动作，但请随意处理我的工作并修复它。