Css 插入新元素时，拖动元素和光标位置不同

我面临的问题是拖动过程中光标和元素的位置，它在大多数操作中都可以正常工作，但在一个例子中失败了，我在droppable over函数中添加了新行。 jsFiddle链接只需尝试将项2移动到项0上，就会创建一个新行，其中项位于上方，此时光标位于上方，但元素不在上方

我已经检查了之前关于SO（1）和（2）的一些建议，但仍然存在问题，是否有人可以查看代码并给出一些建议
谢谢大家!

$.fn.dragInit=function(){
         $(this).each(function(){
           if($(this).data("drag_Enable")==true){
            $.noop();
         }else{
           $(this).draggable({
                containment: "#canvas",
                cursor:"move",
                zIndex:99,
                delay:100,
                revert:"invalid",
                opacity:0.7,
                stop:function(event,ui){
                    if(ui.helper.hasClass("dummy-remove")){
                    var emptyDrop1=$("<div class='e'>Stop</div>");
                    emptyDrop1.dropInit();
                    $(ui.helper).replaceWith(emptyDrop1);//replace original place with Empty cell
                    }
                    $(".dummy").remove();
                    $("#canvas li").filter(function(){
                    return $(this).children(":not('.e')").length==0; 
                    }).remove();
                    },
                    drag:function(event,ui){
                    var msg = "Handler for .mousemove() called at ";
                        msg += ui.position.top +":"+ui.position.left+ ", " + ui.offset.top+":"+ui.offset.left;
                        $("#pos1").html(   msg  );
                     var elm=$(".dummy");
                     if(elm.length==1){
                           ui.helper.css("top", ui.position.top);
                       ui.helper.css("left", ui.position.left);
                       var top=elm.css("height")-ui.helper.css("top");
                       ui.position.top +=  top;
                    }
                          }
                });
                $(this).data("drag_enable",true);   
              }
         }); 
         return this;
     }
     $.fn.dropInit=function(){
         $(this).each(function(){
                     if($(this).data("drop_enable")==true){
                $.noop();
            }else{
                $(this).droppable({
                    tolerance:"pointer",
                    accept:"div",
                    drop:function(event,ui){
                    var drop2=ui.draggable.clone();
                    $(drop2).removeAttr("style");
                    var ne=$(".dummy");//Helper li.
                    var pos=$(this).parent().children().index($(this));
                       if($(this).hasClass("e") && $(drop2).hasClass("a") ){
                                             //drop on empty cell
                        $(this).replaceWith(drop2);
                    }else if(drop2.hasClass("b")){
                                          // drop on existing cell, add it in new row. 
                           ne.html(drop2);
                          }else{ 
                      ne.children(":eq("+pos+")").replaceWith(drop2);   
                      } 
                                      drop2.parent().removeClass("dummy").addClass("c");
                      drop2.dragInit().dropInit();
                      ui.draggable.addClass("dummy-remove");
                },
                     over:function(ev,ui){
                 if($(this).hasClass("e")){
                    $.noop();
                  }else{
                    $(".dummy").remove();
                    var elm=$("<li class='dummy'>");
                    var emptyDrop=$("<div class='e'>over</div>");
                    var emptyDrop1=$("<div class='e'>over</div>");
                    elm.append(emptyDrop).append(emptyDrop1);
                        if($(this).parent().is(":last-child")){
                       elm.insertAfter($(this).parent());   
                    }else{
                      elm.insertBefore($(this).parent());   
                    }

$.fn.dragInit=function（）{
$（this）.each（function（）{
if（$（this）.data（“drag_Enable”）==true）{
$.noop（）；
}否则{
$（此）。可拖动({
遏制：“画布”，
光标：“移动”，
zIndex:99，
延误：100，
回复：“无效”，
不透明度：0.7，
停止：功能（事件、用户界面）{
if（ui.helper.hasClass（“虚拟移除”））{
风险值1=$（“停止”）；
empthydrop1.dropInit（）；
$（ui.helper）.replaceWith（empthydrop1）；//用空单元格替换原始位置
}
$（“.dummy”）.remove（）；
$（“#canvas li”）.filter（函数（）{
返回$（this）.children（“：not（'.e'）”）。长度==0；
}).remove（）；
},
拖动：函数（事件、ui）{
var msg=“在处调用的.mousemove（）的处理程序”；
msg+=ui.position.top+”：“+ui.position.left+”，“+ui.offset.top+”：“+ui.offset.left；
$（“#pos1”）.html（msg）；
var elm=$（“.dummy”）；
如果（elm.length==1）{
ui.helper.css（“top”，ui.position.top）；
css（“左”，ui.position.left）；
var top=elm.css（“高度”）-ui.helper.css（“顶部”）；
ui.position.top+=top；
}
}
});
$（this）.data（“drag_enable”，true）；
}
}); 
归还这个；
}
$.fn.dropInit=函数（）{
$（this）.each（function（）{
if（$（this）.data（“drop\u enable”）==true）{
$.noop（）；
}否则{
$（此）。可拖放({
公差：“指针”，
接受：“div”，
drop：函数（事件、用户界面）{
var drop2=ui.draggable.clone（）；
$（drop2.removeAttr（“样式”）；
var ne=$（“.dummy”）；//帮助程序li。
var pos=$（this）.parent（）.children（）.index（$（this））；
if（$（this.hasClass（“e”）和&$（drop2.hasClass（“a”））{
//空投
$（this）.replacetwith（drop2）；
}else if（drop2.hasClass（“b”））{
//删除现有单元格，将其添加到新行中。
html（drop2）；
}否则{
ne.儿童（“：eq（“+pos+”））。替换为（drop2）；
} 
drop2.parent（）.removeClass（“dummy”）.addClass（“c”）；
drop2.dragInit（）.dropInit（）；
ui.draggable.addClass（“虚拟移除”）；
},
结束：功能（ev、ui）{
if（$（this）.hasClass（“e”））{
$.noop（）；
}否则{
$（“.dummy”）.remove（）；
var elm=$（“
”）；
var Empthydrop=$（“超过”）；
风险值1=$（“超过”）；
elm.append（empthydrop）.append（empthydrop1）；
如果（$（this）.parent（）是（“：last child”））{
elm.insertAfter（$（this.parent（））；
}否则{
elm.insertBefore（$（this.parent（））；
}

在您的小提琴中，无法拖动任何东西。@ggzone刚刚更新了链接，请查看。谢谢。