Question

我正在尝试实现Jquery从一个列表到另一个列表的可排序拖放，但是我无法做到。下面是我的代码。我得到的错误是：

未捕获的TypeError：$（...）。sortable不是函数

请帮助。这就是我想要实现的：https://jqueryui.com/sortable/#connect-lists

{% extends 'base.html' %}
{% load static %}

{% block abc %}
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
        #sortable1, #sortable2 {
            border: 1px solid #eee;
            width: 142px;
            min-height: 20px;
            list-style-type: none;
            margin: 0;
            padding: 5px 0 0 0;
            float: left;
            margin-right: 10px;
        }

        #sortable1 li, #sortable2 li {
            margin: 0 5px 5px 5px;
            padding: 5px;
            font-size: 1.2em;
            width: 120px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#sortable1, #sortable2").sortable({
                connectWith: ".connectedSortable"
            }).disableSelection();
        });
    </script>
    <div class="wrap">
    <ul id="sortable1" class="connectedSortable">
        <li id="item_1" class="ui-state-default">Item 1</li>
        <li id="item_2" class="ui-state-default">Item 2</li>
        <li id="item_3" class="ui-state-default">Item 3</li>
        <li id="item_4" class="ui-state-default">Item 4</li>
        <li id="item_5" class="ui-state-default">Item 5</li>
    </ul>

    <ul id="sortable2" class="connectedSortable">
        <li id="item_6" class="ui-state-highlight">Item 1</li>
        <li id="item_7" class="ui-state-highlight">Item 2</li>
        <li id="item_8" class="ui-state-highlight">Item 3</li>
        <li id="item_9" class="ui-state-highlight">Item 4</li>
        <li id="item_10" class="ui-state-highlight">Item 5</li>
    </ul>
    </div>
{% endblock %}

Answer 1

我解决了这个问题。首先，我将网址更改为

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

到

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

我也将其放在文件的开头以及base.html文件中。

jQuery Sortable不能在Django中拖放列表项

1 个答案: