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

Question

我面临的问题是在拖动过程中Cursor和Element的位置，它在大多数操作中都能正常工作但在一个我在droppable上添加新行的情况下失败了。 jsFiddle链接http://jsfiddle.net/rainbow99984/QbZrN/5/只是尝试在项目0上移动项目2，将使用项目Over创建一个新行，此时光标位于Over但元素不是。

我已经检查了之前关于SO（1）jQuery draggable shows helper in wrong place after page scrolled和（2）JqueryUI Drag: Cursor not at the same position as draggable element的一些建议，但它仍有问题，任何人都可以查看代码并提供一些建议
谢谢大家！

$.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());   
                    }