title: JQ drag & drop - I can get the over event to fire but not the drop?
body: <p>So I have a list whose elements are listed as droppable.</p>
  
  <p>When I try and drag a draggable over these elements, I can not get the drop function to fire.  </p>
  
  <p>However, if I add the over function to the droppable, it fires fine... I cannot figure out what I am doing wrong.</p>
  
  <pre><code> $('#stepList').append('&lt;li class=\"steps ui-state-highlight\" style=\"margin-top:10px;\" &gt;' +
                       '&lt;div class=\"close\"&gt;&lt;span class=\"closeSpan ui-icon ui-icon-circle-close\"&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp;&lt;/div&gt;' +
                       '&lt;div class=\"stepNum"&gt;&lt;/div&gt;' +
                       '&lt;div class=\"stepInfo"&gt;Step Type: &lt;a href=\"#\" onclick=\"editInfo(' + newStepInfo.infoID + ')\"&gt;  ' + newStepInfo.typeOfStep + '&lt;/a&gt;&lt;/div&gt;' +
                       '&lt;div class=\"nameDiv\"&gt;&lt;/div&gt;' +
                       '&lt;div class=\"sigDiv\"&gt;&lt;/div&gt; &lt;div class=\"disDiv"\&gt;&lt;/div&gt;&lt;/li&gt;');
      $('.close').bind('click', function () {
          killStep(this);
      });
      renumberSteps();
  
      //Adding the Droppable ability to this newest added STEP
      $("#stepList li:last").droppable({
          over: function (event, ui) { alert('testOver'); }, // addFunctionsToDropBox(this, event, ui); },
          drop: function (event, ui) {
              alert('test');
              //Main function to bind all droppable events.
              //addFunctionsToDropBox(this, ev, ui);
          }
      });
  </code></pre>
  
  <p>My draggables are here:
   $(".option").draggable({ helper: "clone" });</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="mainbox"&gt;
              &lt;div id="dropbox"&gt;
                  &lt;ul id="stepList"&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div id="rightBar"&gt;
                  &lt;div class="newStep"&gt;
                      &lt;span class="ui-icon ui-icon-person"&gt;&lt;/span&gt;Add a step&lt;/div&gt;
  
                  &lt;div id="nameBox" class="ui-state-hover option"&gt;
                      &lt;span class="ui-icon ui-icon-flag" style="float: left; margin-right: -0.85em;"&gt;&lt;/span&gt;
                      Name a step.
                      &lt;input type="text" class="ui-autocomplete-input" style="width: 95px;" id="stepName" /&gt;
                  &lt;/div&gt;
  
                    &lt;div id="attachBox" class="ui-state-hover option"&gt;
                      &lt;span class="ui-icon ui-icon-suitcase" style="float:left; margin-right: -0.85em;"&gt;&lt;/span&gt;
                      Add attachment.
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>These LI's sit in a div that is also a droppable, so I dont know if that could be messing anything up but I know I have been able to create this behavior before, just am having issues now.</p>
  
  <p>Thanks for any help!
  Todd</p>