在 Django 中使用和发布 Sortable 的结果答案

【问题标题】：Using and Posting results of Sortable in Django在 Django 中使用和发布 Sortable 的结果
【发布时间】：2017-08-31 17:34:22
【问题描述】：

我正在制作一个我希望能够拖动的模型列表，然后根据附加的排序值将订单保存为数据库中的新排序。现在我有这个html代码：

  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <script src="https://code.jquery.com/ui/3.2.1/jquery-ui.js"></script>
  <script src="{% static 'draggable.js' %}"></script>
  <script type="text/javascript">
  $(document).ready(function() {
  $("#test").submit(function(event){

        $.ajax({
             type:"POST",
             url:"{% url 'editpage' bid=book.id pid=page.page_num %}",
             data: {
                    'order': 1 // insert ordering here
                    },
             success: function(){
             }
        });
        return false;
   });
});

</script>
</head>

<body>


<h1>{{page.page_title}}</h1>
<ul id="sortable">
    {% for section in sections.all %}
        <li style="background:blue">{{section.section_title}}</li>
    {% endfor %}

</ul>
<form method='post' id ='test'>
    <input type='submit' value='Test button'/>
</form>

我遇到的问题是试图让排序工作。我在哪里插入脚本(#sortable).sortable() 以便它在页面加载时工作，然后按下，POST 到视图进行解析。

如果有帮助，我的看法：

@ensure_csrf_cookie
def editpage(request, bid = -1, pid = 1):
    ret = {}
    b = Textbook.objects.get(id = int(bid))
    page = b.pages.get(page_num = int(pid))
ret = {

    'book':b,
    'page':page,
    'sections':page.sections,
}
if request.method == 'POST':
    print(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>" + request.POST.get('order'))

return render(request,"content/editpage.html", ret)

其中很大一部分是测试代码，但我试图让它在完全实施之前小规模工作。我遇到的两个主要问题是在哪里插入可排序代码以及如何在按下按钮时将该信息保存到 POST。

【问题讨论】：

你不把它放在 onload 函数中，让它在页面加载时工作吗？你想发送什么到你的视图？在你看来，你想用它做什么？
有很多方法可以做到这一点。如果要确保它在所有其他元素之后加载，可以在页面末尾添加 <script> 部分。您还可以在 JavaScript 头部使用 onload、$(document).ready(function(){})，或更常用的 $(function(){});。
另外，jQuery 有 3.2.1 版，而 jQuery UI 只到了 1.12.1 版。所以对 ui 3.2.1 的调用将失败。请查看：code.jquery.com

标签： jquery django jquery-ui django-views

【解决方案1】：

这是您可以使用的 JavaScript 示例。

工作示例：https://jsfiddle.net/Twisty/h15mv6cr/

HTML

<h1>Page Title</h1>
<ul id="sortable">
  <li style="background:blue" id="model-1">Section Title 1</li>
  <li style="background:blue" id="model-2">Section Title 2</li>
  <li style="background:blue" id="model-3">Section Title 3</li>
  <li style="background:blue" id="model-4">Section Title 4</li>
  <li style="background:blue" id="model-5">Section Title 5</li>
</ul>
<a id="test" href="#">Test Button</a>

CSS

#sortable {
  margin: 1px;
  border: 1px solid #EEE;
  padding: 2px;
  list-style: none;
  width: 210px;
  background: #FFF;
}

#sortable li {
  padding: 3px;
  padding-left: 5px;
  margin: 2px;
  width: 200px;
  border-radius: 4px;
  color: #FFF;
}

JavaScript

$(function() {
  $("#test").button().click(function(e) {
    e.preventDefault();
    var serialOrder = $("#sortable").sortable("serialize");
    var arrayOrder = $("#sortable").sortable("toArray");
    $.ajax({
      type: "POST",
      // used for this example
      url: "/echo/json/",
      dataType: "json",
      data: {
        json: JSON.stringify(arrayOrder)
      },
      success: function(data) {
        // Do something with the data
        console.log(data);
      }
    });
  });
  $("#sortable").sortable();
});

您的代码会有所不同。这只是一个基于您页面中可能填充的内容的紧密示例。

您的表单中没有任何内容可以从可排序列表中收集订单或数据。这是使用serialize 或toArray 方法完成的。查看更多：http://api.jqueryui.com/sortable/

希望对您有所帮助。

【讨论】：

当使用你的 javascript 我得到 crsf 错误并且列表仍然不可拖动。我只是用你的 js 替换了我的 js，然后将其更改为与我的 var 匹配。我是否需要导入或包含文件才能使其工作？
你看到我对你的 jQuery UI 3.2.1 调用的评论了吗？该文件不存在。确保您使用的是正确的 URL：code.jquery.com/ui/1.12.1/jquery-ui.js
我明白了，我解决了这个问题。没有更多错误，一切正常，但我的终端中没有发生发布操作。按钮功能但不执行。
不要使用我的确切 AJAX 代码。您需要将其重新设置为您的需求。根据您的浏览器，您将在控制台的“网络”部分下看到 AJAX 详细信息。
例如，data 应该类似于：data: serialOrder，以便您以正确的方法发布数据数组。我的示例中的 AJAX 特定于 jsfiddles AJAX Echo 功能。