Question

我正在制作一个我希望能够拖动的模型列表，然后根据附加的订购值将订单保存为数据库中的新订单。现在我有这个代码用于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。

Answer 1

Here is an example of the JavaScript that you can use.

Working Example: 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();
});

Your code will be different. This is just a close example based on what might be populated in your page.

You had nothing in your form that would collect the order or data from the sortable list. this is done using either the serialize or toArray methods. See more: http://api.jqueryui.com/sortable/

Hope that helps.

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

1 个答案: