title: How to pass a variable from jQuery draggable to droppable
body: <p>I am trying to use jQuery draggable/droppable to drag a list item to a div, upon which the list item will be deleted from the draggable ul and an ajax call will be made to delete the corresponding item in a MySQL database.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;ul id="draggable"&gt;
   &lt;li id="list_1"&gt;List item 1&lt;/li&gt; // Incrementing ID nos. from database
   &lt;li id="list_2"&gt;List item 2&lt;/li&gt;
   &lt;li id="list_3"&gt;List item 3&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="droppable"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The jQuery so far:</p>
  
  <pre><code>$('#draggable li').draggable({
   drag: function(event, ui) {
    var id = $(this).attr('id').split("_");
    id = id[1];    // OK so far - but how to pass this to droppable?
    }
  });
  
  $('#droppable').droppable({
   drop: function(event, ui) {
    // How to get the id from draggable here so the correct list item is acted on?
    $('#draggable li').remove();
    $.ajax({ 
     url: "delete.php",
     type: "GET",
     data: {
      'id': id,
      'user_id': user_id  // user_id comes from PHP
    }, // end ajax        }
  });
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Many thanks for the responses. I got it to work using:</p>
  
  <pre><code>&lt;script&gt;
   var user_id = "&lt;?php print($user_id); ?&gt;";
  
   $(document).ready(function() {
  
      $('#draggable li').draggable({
        helper: 'clone'
      });
  
      $('#droppable').droppable({
        accept: '#draggable li', 
         drop: function(ev, ui) {
           var id = $(ui.draggable).attr('id').split("_");
           var movie_id = id[1];
           $('#draggable li#list_' + id).remove();
  
           $.ajax({ // begin add ajax
              url: "delete.php",
              type: "GET",
              data: { // begin add data
                'id': id,
                 'user_id': user_id
              } // end data
           }); // end ajax
  
         } // end drop function
      }); // end droppable
   }); // end ready
  
  &lt;/script&gt;
  </code></pre>
  
  <p>It seeems OK to me - are there any problems with that which you can see?</p>