title: How do i save drag and drop in django backend?
body: <p>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.</p>
  
  <pre><code>    &lt;script style="text/javascript"&gt;
  $(function() {
      $( "#roles li" ).draggable({
          appendTo: "body",
          helper: "clone",
          });
      $( "#item-roles li" ).droppable({
          activeClass: "ui-state-default",
          hoverClass: "ui-state-hover",
          accept: ":not(.ui-sortable-helper)",
          drop: function( event, ui ) {
              alert('you drop this')
              $( "&lt;li&gt;&lt;/li&gt;" ).text( ui.draggable.text() ).appendTo( this );
          }
      })
  });
  </code></pre>
  
  <p></p>
  
  <p>In my Html code goes here.</p>
  
  <pre><code>    &lt;div id="item-roles"&gt;
      &lt;h3&gt;Role in {{item.name|title}} Item&lt;/h3&gt;
          &lt;ul&gt;
          &lt;h3&gt;Drag role here!&lt;/h3&gt;
          {% for item_role in item_roles %}
              &lt;li class="placeholder" style="list-style-type: none;"&gt;
                  {{item_role.show_role}} &lt;a href="#"&gt;Remove&lt;/a&gt;
              &lt;/li&gt;
          {% empty%}
              &lt;li&gt;No items found&lt;/li&gt;
          {% endfor %}
          &lt;/ul&gt;            
  &lt;/div&gt;
  
  &lt;div id="roles"&gt;
      &lt;h3&gt;Roles in this Show&lt;/h3&gt;
          &lt;ul&gt;
              {% for role in roles %}
                  &lt;li&gt;
                  &lt;a class="role-detail"&gt;{{ role.role_name }}&lt;/a&gt;
                  &lt;/li&gt;
  
              {% empty %}
                  &lt;p&gt;No show roles &lt;/p&gt;
              {% endfor %}
          &lt;/ul&gt;
  </code></pre>