时间戳

首页 > 解决方案 > JQuery, $(...).sortable 不是函数

javascript - JQuery, $(...).sortable 不是函数

问题描述

我正在尝试使用.sortablejQuery 中的函数对两个列表中的项目进行排序，这些列表位于两个单独的 div （#groupDiv和#userDiv）中。

下面的代码是我从另一个 StackOverflow 帖子中截取的函数，只是用作起点！

问题是 JQuery 脚本没有与页面一起加载，当我加载页面时出现错误异常“$(...).sortable is not a function”。

我尝试下载jquery-ui.js文件的各种版本并在本地导入它们。

我尝试使用如下所示的脚本链接（而不是在本地存储它们）。

我尝试重新安排调用脚本的位置（和顺序）。

我还检查了在这篇文章中找到的可能解决方案，但没有成功。

插入了它应该如何工作的片段（它在片段中有效，但在我通过 VS 运行代码时无效） 

$(document).ready(function () {
			$(".userList, .usersOfGroupList").sortable({
				connectWith: ".dragable",
				remove: function (e, ui) {
					var $this = $(this);
					var childs = $this.find('div');
					if (childs.length === 0) {
						$this.text("Nothing");
					}
				},
				receive: function (e, ui) {
					$(this).contents().filter(function () {
						return this.nodeType == 3;
					}).remove();
				},
			}).disableSelection();
		});
#userDiv {
        height: 100%;
        width: 250px;
        margin-left: 1%;
        float: left;
    }

    #groupDiv {
        width: 250px;
        height: 300px;
        float: left;
        margin-left: 20%;
    }

    #DropDownGroups {
        margin: 1.5% 0 1.5% 0;
        display: block;
        width: 60%;
    }

    #DropDown {
        margin: 1.5% 0 1.5% 0;
        width: 60%;
    }

    #btnGetGroups, #btnShowGroups {
        width: 60%;
        display: block;
    }

    .userList, .usersOfGroupList {
        padding: 0 0 0 0;
        width: 250px;
    }

    .userList {
        border-bottom: 1px solid black;
    }

    .usersOfGroupList {
        margin-top: 1.5%;
    }

    .addBorder {
        border-bottom: 1px solid black;
    }

    #userElement {
        list-style-type: none;
        padding: 1%;
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-right: 1px solid black;
        width: 100%;
        color: black;
        text-align: center;
    }

    .userContainer {
        width: 100%;
        height: 800px; 
    }
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    </head>
    <body>
    	<div class="userContainer">
    		<div id="userDiv">
    			<ul class="userList dragable">
    				<li id='userElement'>Item1</li>
    				<li id='userElement'>Item2</li>
    				<li id='userElement'>Item3</li>
    				<li id='userElement'>Item4</li>
    			</ul>
    		</div>

    		<div id="groupDiv">
    			<ul class="usersOfGroupList dragable">
    				<li id='userElement'>ItemA</li>
    				<li id='userElement'>ItemB</li>
    				<li id='userElement'>ItemC</li>
    				<li id='userElement'>ItemD</li>
    			</ul>
    		</div>
    	</div>
    </body>

标签： javascriptjquery

解决方案

所以，我想我找到了解决方法！因为它是一个 mvc 项目，所以我的 App_Start 文件夹中有 BundleConfig.cs。删除此代码后，它现在可以工作了！：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.validate*"));

请注意，我现在收到此错误消息：“ http://localhost:56043/bundles/jquery 404 (Not Found)”。正如我所说，一切正常，但这会在其他地方引起问题吗？

推荐阅读