Drag and drop using Javascript very slow

Question

I have a drag and drop page in PHP that's working with JS, in this page have +700 li's to be organized, and the page it's very slow. When click in button to reorder, and when drag a li after 2 sec the li move.

This page load in 2sec (it's OK), i'm using lazy loading in img, and HTML file have less 100 lines with 1 CSS and this JS.

My Javascript code:

//Get category and subcategory and create <select> filter.
$("#filter_categoria").on("change", function() {
    var value = $(this).val();
    $.ajax({
        url: "produtos/get_sub",
        type: "post",
        data: {
            "value": value
        },
        success: function(data) {
            $("#filter_subcategoria").html(data);
        },
    });
});

// Reorder button, and drag and drop
$(document).ready(function() {
    $('.reorder_link').on('click', function() {
        $("ul.reorder-photos-list").sortable({
            tolerance: 'pointer'
        });
        $('.reorder_link').html('Salvar');
        $('.reorder_link').attr("id", "saveReorder");
        $('#reorderHelper').slideDown('slow');
        $('.image_link').attr("href", "javascript:void(0);");
        $('.image_link').css("cursor", "move");

        $("#saveReorder").click(function(e) {
            if (!$("#saveReorder i").length) {
                $(this).html('').prepend('<img src="../imagens/refresh-animated.gif"/>');
                $("ul.reorder-photos-list").sortable('destroy');
                $("#reorderHelper").html("Reorganizando produtos, aguarde um instante.").removeClass('light_box').addClass('notice notice_error');

                var h = [];
                $("ul.reorder-photos-list li").each(function() {
                    h.push($(this).attr('id').substr(9));
                });

                $.ajax({
                    type: "POST",
                    url: "produtos/orderUpdateSub",
                    data: {
                        ids: " " + h + ""
                    },
                    success: function() {
                        window.location.reload();
                    }
                });
                return false;
            }
            e.preventDefault();
        });
    });
});

//Here hide the unfiltred li's
$('#filter_subcategoria').change(function() {
    var value = $(this).val();
    $(".reorder_ul").find("li").hide()
    $.each($(".reorder_ul").find("li"), function(n, liData) {
        var liData = $(this).attr('data-filtertext');
        var articleValues = liData.split(" ");
        var article = $(this);
        $.each(articleValues, function(nn, actualValue) {
            if (actualValue == value) {
                article.show();
            }
        });
    });
});

Answer 1

I solved my problem using this script bellow:

    //Get category and subcategory and create <select> filter.
$("#filter_categoria").on("change", function() {
    var value = $(this).val();
    $.ajax({
        url: "produtos/get_sub",
        type: "post",
        data: {
            "value": value
        },
        success: function(data) {
            $("#filter_subcategoria").html(data);
        },
    });
});

//Testing sortable
$(function() {
    t1 = window.performance.now()
    var $sortable1 = $( "#sortable" ).sortable({
      connectWith: ".reorder_ul",
        items: ".sorting-initialize"
    });
    $sortable1.find(".ui-state-default").one("mouseenter",function(){
        $(this).addClass("sorting-initialize");
        $sortable1.sortable('refresh');
    });

    t2 = window.performance.now()
    console.log(t2-t1)
  });
//Finished

// Reorder button, and drag and drop
$(document).ready(function() {
        $("#saveReorder").click(function(e) {
            if (!$("#saveReorder i").length) {
                $(this).html('').prepend('<img src="../imagens/refresh-animated.gif"/>');

                var h = [];
                $("ul.reorder-photos-list li").each(function() {
                    h.push($(this).attr('id').substr(9));
                });

                $.ajax({
                    type: "POST",
                    url: "produtos/orderUpdateSub",
                    data: {
                        ids: " " + h + ""
                    },
                    success: function() {
                        window.location.reload();
                    }
                });
                return false;
            }
            e.preventDefault();
        });
});

//Here hide the unfiltred li's
$('#filter_subcategoria').change(function() {
    var value = $(this).val();
    $(".reorder_ul").find("li").hide()
    $.each($(".reorder_ul").find("li"), function(n, liData) {
        var liData = $(this).attr('data-filtertext');
        var articleValues = liData.split(" ");
        var article = $(this);
        $.each(articleValues, function(nn, actualValue) {
            if (actualValue == value) {
                article.show();
            }
        });
    });
});