Jquery draggable y axis mistaken

Question

I am using jquery draggable my current project, i have an issue about jquery draggable for instance; i drag and drop an item b list from a list but an issue occurs on this point.If my list quite a few long, y axis go haywire.The draggable item appearing under to cursor.

$(function () {
    $( "#list1 li" ).draggable({
        cursor: "move",
        appendTo: "body",
        helper: "clone"
    });

    $( "#list3" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {

            $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
            ui.draggable.remove();
            $.ajax({
                url: "@Url.Action("AddTag", "Home")",
                type: "POST",
                dataType: "json",
                data: { tagId: ui.draggable.attr("data"),Id:@ViewContext.RouteData.Values["id"] },
                success: function (data) {
                },
                error: function () {
                }
            });
        },
    });

    $( "#list3 li" ).draggable({
        cursor: "move",
        appendTo: "body",
        helper: "clone",
        stop:function(event,ui){
            $(this).remove();
            $.ajax({
                url: "@Url.Action("DeleteTag", "Home")",
                type: "POST",
                dataType: "json",
                data: { tagId: $(this).attr("data"),Id:@ViewContext.RouteData.Values["id"] },
                success: function (data) {                        
                },
                error: function () {
                }
            });
        }
    });
});