Question

I use this light sortable plugin to sort my data by drag and drop
http://farhadi.ir/projects/html5sortable/

Now, how to update my sort order

 $('.sortable').sortable().bind('sortupdate', function() {
    //Triggered when the user stopped sorting and the DOM position has changed.

 });

views.py

 def filter_order(request):
    if request.method == 'POST':
        order = request.POST.getlist('filter[]')
        count = 0
        for id in order:
            count += 1
            filter = FilterModel().objects.get(pk=id)
            filter.sort_order = count
            filter.save()
        return HttpResponse('Successfully updating rules order.')
    else:
        return HttpResponse("Error updating rules order.")

urls.py

 urlpatterns = patterns('transactions.views',
      ............

      url(r'^filter-order/$', 'filter_order', 
            name='filter_order'),
 )

rules.html

 <ul class="sortable" id="filter-items">
    {% for filter in filters %}
    <li id="{{ filter.id }}">{{filter.rules}}</li>
    {% endfor %}
 </ul>    

Answer 1

<script>
$('.sortable').sortable().bind('sortupdate', function() {
    datas = new Array();
    var i = 0;

    $('#filter-items li').each(function() {
        datas[i] = $(this).attr('id');
        i++;
    });

    $.ajax({
        type: "POST",
        data: { 
            'filter[]': datas, 
            'csrfmiddlewaretoken': '{{csrf_token}}'
        }, 
        url:"/transactions/filter-order/",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function(data) { 
            notify('', 'Successfully updating rules order.', { autoClose: true, delay: 1000 });
        },
        error: function(ts) { 
            notify('', ts.responseText, { autoClose: true, delay: 1000 });
        }
    });
});
</script>