Question

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

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

问题是JQuery脚本没有加载页面，我得到错误异常＆＃34; $（...）。sortable不是函数＆＃34;当我加载页面。

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

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

我已经尝试重新安排调用脚本的位置（以及以何种顺序）。

我还查看了this帖子中找到的可能解决方案，但没有成功。

插入了它应该如何工作的片段（并且它在snuippet中工作，但在我运行代码时却没有工作）

＆＃13;

$(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();
		});

＆＃13;

#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; 
    }

＆＃13;

<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>

＆＃13;

Answer 1

所以，我想我找到了一个解决方法！由于它是一个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（未找到）”。正如我所说，一切正常但这会在其他地方引起问题吗？

JQuery，$（...）。sortable不是函数

1 个答案: