title: How to set the name value of an input element, inside a transparent div, on drop?
body: <p>I am dragging an item into an input element and setting the input element's name to that of the id of the dragged item. I then read the value of the input element's name to store in the DB. This works. However, I now want to make the input element draggable after it has been populated so it can be removed, if necessary. I do this by putting a transparent div over the input element so the div can be dragged, together with the input element, to remove it. Now I can not retrieve the input element's name value (or the input element's name value is not set). I believe the latter to be the case.</p>
  
  <p>This works:
  Create the table:</p>
  
  <pre><code>newRows +=      "&lt;table name ='activityTable'&gt;";
  newRows +=          "&lt;tbody id='activity2Tablebody' name='test1'&gt;";
  newRows +=              "&lt;tr&gt;";
  newRows +=                  "&lt;td class='dropValue' name='test2'&gt;";
  newRows +=                      "&lt;div class='dragabbleRemove'&gt;";
  newRows +=                          "&lt;input class='droppableItem activityWidth' name='test3' disabled&gt;&lt;/input&gt;";//Droppable Activity Class
  newRows +=                      "&lt;/div&gt;";
  newRows +=                  "&lt;/td&gt;";
  newRows +=              "&lt;/tr&gt;";
  newRows +=          "&lt;/tbody&gt;";
  newRows +=      "&lt;/table&gt;";
  </code></pre>
  
  <p>On drop set the value of name property to the value of the id property of the dragged item:</p>
  
  <pre><code>draggableId = (draggable.prop('id'));
  droppable.prop('name', draggableId);
  </code></pre>
  
  <p>Retrieve the value of the name property:</p>
  
  <pre><code>alert ("$(this).find('input').attr('name'): " + $(this).find('input').attr('name'));//id value
  </code></pre>
  
  <p>I then put a transparent div over the inputs elements so the div can be dragged to remove it:</p>
  
  <pre><code>newRows += "&lt;div class='dragabbleRemove'&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;";
  newRows +=      "&lt;input class='droppableItem activityWidth' name='test3' disabled&gt;&lt;/input&gt;";//Droppable Activity Class
  newRows += "&lt;/div&gt;";
  </code></pre>
  
  <p>Now this returns blank:</p>
  
  <pre><code>alert ("$(this).find('input').attr('name'): " + $(this).find('input').attr('name'));//id value
  </code></pre>
  
  <p>I suspect that the following line needs to be changed to set the input element's name value; however, I can not find out what it needs to change to (the correct code):</p>
  
  <pre><code>droppable.prop('name', draggableId);
  </code></pre>