javascript - Javascript / Jquery HubSpot 可排序，Sortable.init() 可排序未定义错误

Question

所以我动态地创建了一些 div 标签并随着时间的推移更新它们，我需要一个可排序的工作，这样我就可以按它们的各个字段对 div 进行排序。我下载了 HubSport Sortable 脚本并按照他们的示例进行操作，并使用 Sortable.init(); 进行了尝试。并且没有把它放在代码的其余部分之前，它只是说它没有定义，但它正在加载对我来说没有意义的 js 文件。

链接到 API http://github.hubspot.com/sortable/api/options/

console ReferenceError: Sortable is not defined vmstatus:50

代码：

    <link rel="icon" href={% static 'customers/favicon.ico' %}>
    <link href="{% static 'css/loading.css' %}" rel="stylesheet">
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/dashboard.css' %}" rel="stylesheet">
   <script src="http://dygraphs.com/1.0.1/dygraph-combined.js"></script>    
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
    <script src="{% static 'sortable.js' %}"></script>

<script type="text/javascript">
        $(document).ready(function() {
            $("#submit").click(function() {
                    $.ajax({
                        url : "/vmstatus/", 
                        type : "POST",
                        dataType: "json", 
                        data : {
                            selected_customer : $("#selected_customer").val(),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) {
                                $('#table-repeat-data').remove();
                                setInterval(update, 5000);  
                                var on = '<img src={% static "icons/on2.jpg" %}>'
                                var off = '<img src={% static "icons/off.jpg" %}>'
                                $('#table_name').append("<table class='table' id='table-repeat-data'><thead><tr><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>VM Name</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''><b>PowerState </b> </th><th align='center' data-toggle='tooltip' data-placement='left' title='N'><b>Commands </b></th></tr></thead><tbody>");

                                for (var index = 0; index < json.vmlist.length; index++) {
                                    if(json.vmlist[index][1] == 'poweredOn'){
                                        $('#table-repeat-data').append ('<tr><td id="' + json.vmlist[index][0] + '">' + json.vmlist[index][0] + '</td><td id="' + json.vmlist[index][2] + '1">' + on + '</td><td id="' + json.vmlist[index][2] + '">' + json.vmlist[index][2] + '</td></tr>');
                                    }else{
                                        $('#table-repeat-data').append ('<tr><td id="' + json.vmlist[index][0] + '">' + json.vmlist[index][0] + '</td><td id="' + json.vmlist[index][2] + '1">' + off + '</td><td id="' + json.vmlist[index][2] + '">' + json.vmlist[index][2] + '</td></tr>');
                                    }
                                }
                                Sortable.init(); //line 50 is here
                                var dataTable;
                                dataTable = document.querySelector('#table-repeat-data');
                                Sortable.initTable(dataTable);

                            },
                            error : function(xhr,errmsg,err) {
                                console.log(xhr.status + ": " + xhr.responseText);
                            }
                    });
                    return false;
            });
        });
function update(){
                    $.ajax({
                        url : "/vmstatus/", 
                        type : "POST",
                        dataType: "json", 
                        data : {
                            selected_customer : $("#selected_customer").val(),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) {
                                var on = '<img src={% static "icons/on2.jpg" %}>'
                                var off = '<img src={% static "icons/off.jpg" %}>'
                                for (var index = 0; index < json.vmlist.length; index++) {
                                    if(json.vmlist[index][1] == 'poweredOn'){           
                                        var get_element_id = json.vmlist[index][2] + '1';
                                        document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
                                        document.getElementById(get_element_id).innerHTML = on;
                                        document.getElementById(json.vmlist[index][2]).innerHTML = json.vmlist[index][2];
                                    }else{
                                        var get_element_id = json.vmlist[index][2] + '1';                                   
                                        document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
                                        document.getElementById(get_element_id).innerHTML = off;
                                        document.getElementById(json.vmlist[index][2]).innerHTML = json.vmlist[index][2];
                                    }
                                }

                            },
                            error : function(xhr,errmsg,err) {
                                console.log('Bad');
                                console.log(xhr.status + ": " + xhr.responseText);
                            }
                    });

}        

</script>