Javascript 使用编号对列表进行排序时，可以自动生成新列表

当我对列表进行排序时，有时会对生成的新列表进行排序。在这个我可以拖放到列表中在这个我填写数字标题，排序时，它可以使新的列表。。。。。我必须解决它。。。我要做的就是它能正确排序，不能自动生成新列表 当按相反的顺序排序时，可以按1、2、3等相反的数字顺序进行排序

   var start=1;
   function hideblocks(id){
//document.getElementById(id).style.display = 'none';
$("#" + id).closest('li').remove();
//$("#" + id).closest('li').html('');
    }
    var default_title='Title goes here';
   var default_subtitle='Lorem ipsum dolor sit amet';
   var text_boxes=new Array();

  var li_ids_to_start_from=2;

    $(window).load(function(){
$(".draggable li").draggable({
    appendTo: 'body',
    helper: 'clone',
});

function handle_drop(){
    $("#droppable li").droppable({
        hoverClass: "droppable-hovered",
        activeClass:"droppable-hovered-active",
        drop: function(event,ui) {
             +ui.draggable.parent().attr('id') + ' was dropped from ' + ui.draggable.parent().attr('id'));

            var dropped_to_html=$(this).html();
            var dropped_from_html=$("#" + ui.draggable.parent().attr('id')).html();


            var current_li_array=new Array();
            var li_array_index=0;
            $("#droppable").find('li').each(function(j, li){
                current_li_array[li_array_index]=$(this).attr('id');
                li_array_index++;
            })

            if(dropped_to_html !='' && ui.draggable.parent().attr('id') === undefined){

                var dropped_li=$(this).attr('id');

                $numeric_array=dropped_li.split('_');
                var current_li=$numeric_array[1];

                for(j=(current_li_array.length-1);j > current_li_array.indexOf(dropped_li);j--){
                    $("#" + current_li_array[j]).html($("#" + current_li_array[j -1]).html());
                    $("#" +current_li_array[j]).children(":first").attr('style','');

                    $("#" + current_li_array[j -1]).html('');

                    if(j==0){
                        break;
                    }
                }

            }

            if(ui.draggable.attr('id') !== undefined ){

                var dropped_to=$(this).attr('id');
                var split_id_dropped_to=dropped_to.split('_');

                var dropped_from=$("#" + ui.draggable.parent().attr('id')).attr('id');
                var split_id_dropped_from=dropped_from.split('_');


                if(dropped_to != dropped_from){



                    if(split_id_dropped_from > split_id_dropped_to){
                        $("#" + ui.draggable.parent().attr('id')).html('');
                    }



                    for(j=(current_li_array.length-1);j > current_li_array.indexOf(dropped_to);j--){

                        $("#" + current_li_array[j]).html($("#" + current_li_array[j -1]).html());
                        $("#" +current_li_array[j]).children(":first").attr('style','');


                        $("#" + current_li_array[j -1]).html('');

                        if(j==0){
                            break;
                        }
                    }


                    $(this).html(dropped_from_html);

                    if(split_id_dropped_from < split_id_dropped_to){
                        $("#" + ui.draggable.parent().attr('id')).closest('li').remove();
                    }
                }

            }else{
                if(ui.draggable.attr("class") =="letmego ui-draggable"){
                    $(this).html("<div  id=\"outhide"+ start+"\"><div class=\"drag_icon_out\"><div class=\"list_box\"><div class=\"cam_out\"><span><img src=\"images/drag_icon1.png\" alt=\"\"></span></div><h2><input name=\"\" id=\"text_"+ start+"\" onkeyup=\" text_boxes['text_" + start+ "']=this.value;\" onfocus=\"clear_default(this,default_title); \" onblur=\"add_default(this,default_title); \" type=\"text\" value=\"Title goes here\" class=\"list_box_input\"><br /><input name=\"\" id=\"text_sub_"+ start+"\" onkeyup=\" text_boxes['text_sub_" + start+ "']=this.value;\" onfocus=\"clear_default(this,default_subtitle); \" onblur=\"add_default(this,default_subtitle); \" type=\"text\" value=\"Lorem ipsum dolor sit amet\" class=\"list_box_input2\"></h2><div class=\"list_box_img\"><h2>Add Content<br><span>Click the Edit button below.</span</h2></div><div class=\"list_box_icon2\"><div class=\"list_box_inn\"><a class=\"fancybox\" href=\"images/lighboxt_img.jpg\" data-fancybox-group=\"gallery\" title=\"Rules to Solve Proportions\"><div class=\"list_box_2\"><img src=\"images/box_icon1.png\" alt=\"\"></div></a><a href=\"javascript:;\" onClick=\"hideblocks('outhide" + start+ "')\"><div class=\"delete_box_3\"><img src=\"images/delete_icon.png\" alt=\"\"></div></a><div class=\"list_box_3\"><div class=\"box_message\">2</div><img src=\"images/box_icon2.png\" alt=\"\"></div><div class=\"list_box_4\"><div class=\"box_message\">1</div><img src=\"images/box_icon3.png\" alt=\"\"></div><div class=\"list_box_5\"><img src=\"images/box_icon4.png\" alt=\"\"></div></div></div></div></div></div>");
                    $("#droppable").append('<li id="li_' + li_ids_to_start_from +'"></li>');
                    li_ids_to_start_from++;
                    $('#droppable li').sortable({});
                    handle_drop();              

                }else if(ui.draggable.attr("class") =="letmego2 ui-draggable"){
                    $(this).html("<div  id=\"outhide2"+ start+"\"><div class=\"drag_icon_out\"><div class=\"list_box\"><div class=\"cam_out2\"><span><img src=\"images/drag_icon2.png\" alt=\"\"></span></div><h2><input name=\"\" id=\"text_"+ start+"\" onkeyup=\" text_boxes['text_" + start+ "']=this.value;\"  onfocus=\"clear_default(this,default_title); \" onblur=\"add_default(this,default_title); \" type=\"text\" value=\"Title goes here\" class=\"list_box_input\"><br /><input name=\"\"  id=\"text_sub_"+ start+"\" onkeyup=\" text_boxes['text_sub_" + start+ "']=this.value;\" onfocus=\"clear_default(this,default_subtitle); \" onblur=\"add_default(this,default_subtitle); \" type=\"text\" value=\"Lorem ipsum dolor sit amet\" class=\"list_box_input2\"></h2><div class=\"list_box_img2\"><h2>Add Content<br><span>Click the Edit button below.</span</h2></div><div class=\"list_box_icon2\"><div class=\"list_box_inn\"><a class=\"fancybox\" href=\"images/lighboxt_img2.jpg\" data-fancybox-group=\"gallery\" title=\"Rules to Solve Proportions2\"><div class=\"list_box_2\"><img src=\"images/box_icon1.png\" alt=\"\"></div></a><a href=\"javascript:;\" onClick=\"hideblocks('outhide2" + start+ "')\"><div class=\"delete_box_3\"><img src=\"images/delete_icon.png\" alt=\"\"></div></a><div class=\"list_box_3\"><div class=\"box_message\">2</div><img src=\"images/box_icon2.png\" alt=\"\"></div><div class=\"list_box_4\"><div class=\"box_message\">1</div><img src=\"images/box_icon3.png\" alt=\"\"></div><div class=\"list_box_5\"><img src=\"images/box_icon4.png\" alt=\"\"></div></div></div></div></div></div>");
                    $("#droppable").append('<li id="li_' + li_ids_to_start_from +'"></li>');
                    li_ids_to_start_from++;
                    $('#droppable li').sortable({});
                    handle_drop();              

                }else if(ui.draggable.attr("class") =="letmego3 ui-draggable"){
                    $(this).html("<div  id=\"outhide3"+ start+"\"><div class=\"drag_icon_out\"><div class=\"list_box\"><div class=\"cam_out23\"><span><img src=\"images/drag_icon32.png\" alt=\"\"></span></div><h2><input name=\"\" id=\"text_"+ start+"\" onkeyup=\" text_boxes['text_" + start+ "']=this.value;\"  onfocus=\"clear_default(this,default_title); \" onblur=\"add_default(this,default_title); \" type=\"text\" value=\"Title goes here\" class=\"list_box_input\"><br /><input name=\"\"  id=\"text_sub_"+ start+"\" onkeyup=\" text_boxes['text_sub_" + start+ "']=this.value;\" onfocus=\"clear_default(this,default_subtitle); \" onblur=\"add_default(this,default_subtitle); \" type=\"text\" value=\"Lorem ipsum dolor sit amet\" class=\"list_box_input2\"></h2><div class=\"list_box_img3\"><h2>Add Content<br><span>Click the Edit button below.</span</h2></div><div class=\"list_box_icon2\"><div class=\"list_box_inn\"><a class=\"fancybox\" href=\"images/lighboxt_img3.jpg\" data-fancybox-group=\"gallery\" title=\"Rules to Solve Proportions3\"><div class=\"list_box_2\"><img src=\"images/box_icon1.png\" alt=\"\"></div></a><a href=\"javascript:;\" onClick=\"hideblocks('outhide3" + start+ "')\"><div class=\"delete_box_3\"><img src=\"images/delete_icon.png\" alt=\"\"></div></a><div class=\"list_box_3\"><div class=\"box_message\">2</div><img src=\"images/box_icon2.png\" alt=\"\"></div><div class=\"list_box_4\"><div class=\"box_message\">1</div><img src=\"images/box_icon3.png\" alt=\"\"></div><div class=\"list_box_5\"><img src=\"images/box_icon4.png\" alt=\"\"></div></div></div></div></div></div>");
                    $("#droppable").append('<li id="li_' + li_ids_to_start_from +'"></li>');
                    li_ids_to_start_from++;
                    $('#droppable li').sortable({});
                    handle_drop();              

                }else if(ui.draggable.attr("class") =="letmego4 ui-draggable"){
                    $(this).html("<div  id=\"outhide4"+ start+"\"><div class=\"drag_icon_out\"><div class=\"list_box\"><div class=\"cam_out3\"><span><img src=\"images/drag_icon4.png\" alt=\"\"></span></div><h2><input name=\"\" id=\"text_"+ start+"\" onkeyup=\" text_boxes['text_" + start+ "']=this.value;\"  onfocus=\"clear_default(this,default_title); \" onblur=\"add_default(this,default_title); \" type=\"text\" value=\"Title goes here\" class=\"list_box_input\"><br /><input name=\"\"  id=\"text_sub_"+ start+"\" onkeyup=\" text_boxes['text_sub_" + start+ "']=this.value;\" onfocus=\"clear_default(this,default_subtitle); \" onblur=\"add_default(this,default_subtitle); \" type=\"text\" value=\"Lorem ipsum dolor sit amet\" class=\"list_box_input2\"></h2><div class=\"list_box_img4\"><h2>Add Content<br><span>Click the Edit button below.</span</h2></div><div class=\"list_box_icon2\"><div class=\"list_box_inn\"><a class=\"fancybox\" href=\"images/lighboxt_img4.jpg\" data-fancybox-group=\"gallery\" title=\"Rules to Solve Proportions4\"><div class=\"list_box_2\"><img src=\"images/box_icon1.png\" alt=\"\"></div></a><a href=\"javascript:;\" onClick=\"hideblocks('outhide4" + start+ "')\"><div class=\"delete_box_3\"><img src=\"images/delete_icon.png\" alt=\"\"></div></a><div class=\"list_box_3\"><div class=\"box_message\">2</div><img src=\"images/box_icon2.png\" alt=\"\"></div><div class=\"list_box_4\"><div class=\"box_message\">1</div><img src=\"images/box_icon3.png\" alt=\"\"></div><div class=\"list_box_5\"><img src=\"images/box_icon4.png\" alt=\"\"></div></div></div></div></div></div>");
                    $("#droppable").append('<li id="li_' + li_ids_to_start_from +'"></li>');
                    li_ids_to_start_from++;
                    handle_drop();              

                }else if(ui.draggable.attr("class") =="letmego5 ui-draggable"){
                    $(this).html("<div id=\"outhide5"+ start+"\"><div class=\"drag_icon_out\"><div class=\"list_box\"><div class=\"cam_out4\"><span><img src=\"images/drag_icon5.png\" alt=\"\"></span></div><h2><input name=\"\" id=\"text_"+ start+"\" onkeyup=\" text_boxes['text_" + start+ "']=this.value;\"  onfocus=\"clear_default(this,default_title); \" onblur=\"add_default(this,default_title); \" type=\"text\" value=\"Title goes here\" class=\"list_box_input\"><br /><input name=\"\"  id=\"text_sub_"+ start+"\" onkeyup=\" text_boxes['text_sub_" + start+ "']=this.value;\" onfocus=\"clear_default(this,default_subtitle); \" onblur=\"add_default(this,default_subtitle); \" type=\"text\" value=\"Lorem ipsum dolor sit amet\" class=\"list_box_input2\"></h2><div class=\"list_box_img5\"><h2>Add Content<br><span>Click the Edit button below.</span</h2></div><div class=\"list_box_icon2\"><div class=\"list_box_inn\"><a class=\"fancybox\" href=\"images/lighboxt_img5.jpg\" data-fancybox-group=\"gallery\" title=\"Rules to Solve Proportions\"><div class=\"list_box_2\"><img src=\"images/box_icon1.png\" alt=\"\"></div></a><a href=\"javascript:;\" onClick=\"hideblocks('outhide5" + start+ "')\"><div class=\"delete_box_3\"><img src=\"images/delete_icon.png\" alt=\"\"></div></a><div class=\"list_box_3\"><div class=\"box_message\">2</div><img src=\"images/box_icon2.png\" alt=\"\"></div><div class=\"list_box_4\"><div class=\"box_message\">1</div><img src=\"images/box_icon3.png\" alt=\"\"></div><div class=\"list_box_5\"><img src=\"images/box_icon4.png\" alt=\"\"></div></div></div></div></div></div>");
                    $("#droppable").append('<li id="li_' + li_ids_to_start_from +'"></li>');
                    li_ids_to_start_from++;
                    $('#droppable li').sortable({});
                    handle_drop();              

                }else if(ui.draggable.attr("class") =="letmego6 ui-draggable"){
                    $(this).html("<div  id=\"outhide6"+ start+"\"><div class=\"drag_icon_out\"><div class=\"list_box\"><div class=\"cam_out5\"><span><img src=\"images/drag_icon62.png\" alt=\"\"></span></div><h2><input name=\"\" id=\"text_"+ start+"\" onkeyup=\" text_boxes['text_" + start+ "']=this.value;\"  onfocus=\"clear_default(this,default_title); \" onblur=\"add_default(this,default_title); \" type=\"text\" value=\"Title goes here\" class=\"list_box_input\"><br /><input name=\"\"  id=\"text_sub_"+ start+"\" onkeyup=\" text_boxes['text_sub_" + start+ "']=this.value;\" onfocus=\"clear_default(this,default_subtitle); \" onblur=\"add_default(this,default_subtitle); \" type=\"text\" value=\"Lorem ipsum dolor sit amet\" class=\"list_box_input2\"></h2><div class=\"list_box_img6\"><h2>Add Content<br><span>Click the Edit button below.</span</h2></div><div class=\"list_box_icon2\"><div class=\"list_box_inn\"><a class=\"fancybox\" href=\"images/lighboxt_img6.jpg\" data-fancybox-group=\"gallery\" title=\"Rules to Solve Proportions5\"><div class=\"list_box_2\"><img src=\"images/box_icon1.png\" alt=\"\"></div></a><a href=\"javascript:;\" onClick=\"hideblocks('outhide6" + start+ "')\"><div class=\"delete_box_3\"><img src=\"images/delete_icon.png\" alt=\"\"></div></a><div class=\"list_box_3\"><div class=\"box_message\">2</div><img src=\"images/box_icon2.png\" alt=\"\"></div><div class=\"list_box_4\"><div class=\"box_message\">1</div><img src=\"images/box_icon3.png\" alt=\"\"></div><div class=\"list_box_5\"><img src=\"images/box_icon4.png\" alt=\"\"></div></div></div></div></div></div>");
                    $("#droppable").append('<li id="li_' + li_ids_to_start_from +'"></li>');
                    li_ids_to_start_from++;
                    $('#droppable li').sortable({});
                    handle_drop();              

                }else if(ui.draggable.attr("class") =="letmego7 ui-draggable"){
                    $(this).html("<div  id=\"outhide7"+ start+"\"><div class=\"drag_icon_out\"><div class=\"list_box\"><div class=\"cam_out6\"><span><img src=\"images/drag_icon7.png\" alt=\"\"></span></div><h2><input name=\"\" id=\"text_"+ start+"\" onkeyup=\" text_boxes['text_" + start+ "']=this.value;\"  onfocus=\"clear_default(this,default_title); \" onblur=\"add_default(this,default_title); \" type=\"text\" value=\"Title goes here\" class=\"list_box_input\"><br /><input name=\"\"  id=\"text_sub_"+ start+"\" onkeyup=\" text_boxes['text_sub_" + start+ "']=this.value;\" onfocus=\"clear_default(this,default_subtitle); \" onblur=\"add_default(this,default_subtitle); \" type=\"text\" value=\"Lorem ipsum dolor sit amet\" class=\"list_box_input2\"></h2><div class=\"list_box_img7\"><h2>Add Content<br><span>Click the Edit button below.</span</h2></div><div class=\"list_box_icon2\"><div class=\"list_box_inn\"><a class=\"fancybox\" href=\"images/lighboxt_img7.jpg\" data-fancybox-group=\"gallery\" title=\"Rules to Solve Proportions6\"><div class=\"list_box_2\"><img src=\"images/box_icon1.png\" alt=\"\"></div></a><a href=\"javascript:;\" onClick=\"hideblocks('outhide7" + start+ "')\"><div class=\"delete_box_3\"><img src=\"images/delete_icon.png\" alt=\"\"></div></a><div class=\"list_box_3\"><div class=\"box_message\">2</div><img src=\"images/box_icon2.png\" alt=\"\"></div><div class=\"list_box_4\"><div class=\"box_message\">1</div><img src=\"images/box_icon3.png\" alt=\"\"></div><div class=\"list_box_5\"><img src=\"images/box_icon4.png\" alt=\"\"></div></div></div></div></div></div>");
                    $("#droppable").append('<li id="li_' + li_ids_to_start_from +'"></li>');
                    li_ids_to_start_from++;
                    $('#droppable li').sortable({});
                    handle_drop();              

                }else if(ui.draggable.attr("class") =="letmego8 ui-draggable"){
                    $(this).html("<div  id=\"outhide8"+ start+"\"><div class=\"drag_icon_out\"><div class=\"list_box\"><div class=\"cam_out7\"><span><img src=\"images/drag_icon8.png\" alt=\"\"></span></div><h2><input name=\"\" id=\"text_"+ start+"\" onkeyup=\" text_boxes['text_" + start+ "']=this.value;\"  onfocus=\"clear_default(this,default_title); \" onblur=\"add_default(this,default_title); \" type=\"text\" value=\"Title goes here\" class=\"list_box_input\"><br /><input name=\"\"  id=\"text_sub_"+ start+"\" onkeyup=\" text_boxes['text_sub_" + start+ "']=this.value;\" onfocus=\"clear_default(this,default_subtitle); \" onblur=\"add_default(this,default_subtitle); \" type=\"text\" value=\"Lorem ipsum dolor sit amet\" class=\"list_box_input2\"></h2><div class=\"list_box_img8\"><h2>Add Content<br><span>Click the Edit button below.</span</h2></div><div class=\"list_box_icon2\"><div class=\"list_box_inn\"><a class=\"fancybox\" href=\"images/lighboxt_img8.jpg\" data-fancybox-group=\"gallery\" title=\"Rules to Solve Proportions7\"><div class=\"list_box_2\"><img src=\"images/box_icon1.png\" alt=\"\"></div></a><a href=\"javascript:;\" onClick=\"hideblocks('outhide8" + start+ "')\"><div class=\"delete_box_3\"><img src=\"images/delete_icon.png\" alt=\"\"></div></a><div class=\"list_box_3\"><div class=\"box_message\">2</div><img src=\"images/box_icon2.png\" alt=\"\"></div><div class=\"list_box_4\"><div class=\"box_message\">1</div><img src=\"images/box_icon3.png\" alt=\"\"></div><div class=\"list_box_5\"><img src=\"images/box_icon4.png\" alt=\"\"></div></div></div></div></div></div>");
                    $("#droppable").append('<li id="li_' + li_ids_to_start_from +'"></li>');
                    li_ids_to_start_from++;
                    $('#droppable li').sortable({});
                    handle_drop();              
                }

                answers = answers + 1;
            }



            $(this).children(":first").attr('style','');


            for(i=1;i <= start;i++){

                if(typeof text_boxes['text_' + i] === "undefined"){
                    $("#text_" + i).val(default_title);
                }else{
                    $("#text_" + i).val(text_boxes['text_' + i]);
                }   

                if(typeof text_boxes['text_sub_' + i] === "undefined"){
                    $("#text_sub_" + i).val(default_subtitle);
                }else{
                    $("#text_sub_" + i).val(text_boxes['text_sub_' + i]);
                }   

            }



            for(i=1;i < li_ids_to_start_from -1;i++){
                if($('#li_' + i).html() ==''){
                    $('#li_' + i).remove();
                }
            }




            if(!$("#droppable li:last-child").html() ==''){
                $("#droppable").append('<li id="li_' + li_ids_to_start_from +'"></li>');
                li_ids_to_start_from++;
                $('#droppable li').sortable({});
                handle_drop();

            }

            start++;
        }
    });
}

handle_drop();

    });



        $(function(){
$('#droppable').sortable({});
   });

---

嘿，我不明白你的问题。你能试着写得更准确些吗？问题是当我拖放列表和排序时，移动列表可以自动生成一个新的元素列表。。。。。我还希望当我在列表元素的标题中填充一些数字，然后相互排序时，它可以按相反的顺序工作