How do i save drag and drop in django backend?

I'm trying to create a drag and drop function in my project that when ever i drop an item it automatically saves in the backend side.

    <script style="text/javascript">
$(function() {
    $( "#roles li" ).draggable({
        appendTo: "body",
        helper: "clone",
        });
    $( "#item-roles开发者_Go百科 li" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            alert('you drop this')
            $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        }
    })
});

In my Html code goes here.

    <div id="item-roles">
    <h3>Role in {{item.name|title}} Item</h3>
        <ul>
        <h3>Drag role here!</h3>
        {% for item_role in item_roles %}
            <li class="placeholder" style="list-style-type: none;">
                {{item_role.show_role}} <a href="#">Remove</a>
            </li>
        {% empty%}
            <li>No items found</li>
        {% endfor %}
        </ul>            
</div>

<div id="roles">
    <h3>Roles in this Show</h3>
        <ul>
            {% for role in roles %}
                <li>
                <a class="role-detail">{{ role.role_name }}</a>
                </li>

            {% empty %}
                <p>No show roles </p>
            {% endfor %}
        </ul>

You can use dajaxice (and dajax) for calling your django functions "from" javascript. Now you need to write down your python code which is missing from your question...