jquery - 如何保存 django 拖放连接列表可排序

Question

我想在 django 中制作拖放连接列表。但是，如何将 sortable2 保存在模型字段 id_unit 中？

模板html

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
</ul>

模型.py

 class Member(models.Model):
    id_unit = models.ForeignKey(Unit)
    id_fleet = models.ForeignKey(Fleet)

    def __str__(self):
        return self.name_track

View .py

def fleet_member_add(request):
if request.method == "POST":
    form = FleetMember(request.POST)
    if form.is_valid():
        post = form.save(commit=False)
        post.save()
        return redirect('fleet_member_add.html', pk=post.pk)
else:
    form = FleetMember()
return render(request,'fleet_member_add.html', {'form': form}, context_instance= RequestContext(request))

Answer 1

jQueryUI 有一个名为 sortable 的小部件。这只是一个可排序 dom 元素的列表。它允许您拖动项目并将它们重新排列在列表中。选项在您提供给可排序的对象中传递。

允许将可拖动对象拖放到指定的可排序对象上。如果使用此选项，则可以将可拖动对象拖放到可排序列表上，然后成为其一部分。需要 jQuery UI Sortable要包含的插件。

示例:

使用指定的 connectToSortable 选项初始化可拖动对象:

$( ".selector" ).draggable({
  connectToSortable: "#my-sortable"
});

初始化后获取或设置 connectToSortable 选项:

// Getter
var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" );

// Setter
$( ".selector" ).draggable( "option", "connectToSortable", "#my-sortable" );

jQueryUI 还允许您将可排序项相互连接，这为一些有趣的用户界面创造了潜力。

$('#my-list').sortable({
  connectWith: '#my-other-list'
});