Javascript 示例jQuery sortable不适用于MVC4 Web应用程序

我目前正在处理一个MVC项目，试图添加拖放功能。作为参考，我基本上复制并粘贴了所有内容到我的项目中，试图看看它是否有效

到目前为止，我已经在_layout.cshtml页面的项目标题标记中添加了以下内容：

@Scripts.Render("~/Scripts/jquery-2.1.3.min.js")
@Scripts.Render("~/Scripts/jquery-ui-1.11.4.min.js")
@Styles.Render("~/Content/css")
<style>
    #sortable {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 450px;
    }

        #sortable li {
            margin: 3px 3px 3px 0;
            padding: 1px;
            float: left;
            width: 100px;
            height: 90px;
            font-size: 4em;
            text-align: center;
        }
</style>
<script>
    $(function () {
        $("#sortable").sortable();
        $("#sortable").disableSelection();
    });
</script>

并将其添加到Index.cshtml页面

<ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
</ul>

---

我想，如果我能让这个示例正常工作，那么从我的控制器解析数据并使其正常工作，除了解析数据之外，将不需要更多。但是，在我运行这个项目时，我得到以下错误UncaughtTypeError:undefined不是一个函数，您可以看到。

请检查您的JavaScript库是否正确加载。它们必须按以下顺序排列

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

---

在html源代码中，一旦我运行了页面，它就会很好地加载脚本。我继续将您的源代码直接复制到我的代码中，但它仍然给了我相同的错误。我发现了问题。MVC将jQuery包加载到_Layout.cshtml页面主体的下方，而不是页眉部分。因此，它加载了两次jQuery，这就是导致库加载混乱的原因。