title: removing clone and deleting draggable in jQuery's drag and drop
body: <p>I am still rather new to jQuery and had a question.  I am trying to implement a "drag and drop" method where the user can drag items in one list and drop them in "buckets" in another.  I seem to have the dragging part down but two things are causing me errors.  First, I cant seem to remove the "clone" that gets dragged and second I cant remove the original item from the "Draggable" list.  Bellow is my code (after it's been rendered in ASP.Net".  </p>
  
  <p>I am using the following jQuery Libraries:  </p>
  
  <ol>
  <li>1.4.2/jquery.js,jquery.ui.core.js</li>
  <li>jquery.ui.widget.js</li>
  <li>jquery.ui.mouse.js</li>
  <li>jquery.ui.draggable.js</li>
  <li>jquery.ui.droppable.js.</li>
  </ol>
  
  <p>JScript:</p>
  
  <pre><code>    $(function () {
          $(".draggable1").draggable({
              helper:'clone',
              scroll: false,
              revert: "invalid",
              appendTo: '#PopupBody',             
              drag: function(event,ui){              
              }               
  
          });
  
          $(".droppable1").droppable({   
  
              activeClass: "ui-state-hover",
              hoverClass: "ui-state-active",
              drop: function (event, ui) {
                  var drag_id = $(ui.draggable).attr("id");
                  var targetElem = $(this).attr("id");
                  deleteMe = true;            
                $(this)
              .addClass("ui-state-highlight")
              .find("p")
              .html("Dropped! inside " + targetElem);
                //destroy clone
               //remove from list
  
  
              }
          });
      });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table style="width:100%; height:100%; position:relative; border:1px solid blue;"&gt;
     &lt;tr&gt;
       &lt;td style="height:100%"&gt;
          &lt;div id="divWrapper" style="position:relative; border:1px solid green; overflow:auto;  width:15em; height:80%;"&gt;
             &lt;table id="testDlg1_dlUsers" cellspacing="0" style="border-collapse:collapse;"&gt;
                &lt;tr&gt;
                   &lt;td style="color:#8C4510;background-color:#FFF7E7;"&gt;
                      &lt;div id="divWrapperItem"  class="draggable1 ui-widget-content" style="border:1px solid black;"&gt;
                         &lt;table&gt;
                           &lt;tr&gt;
                              &lt;td&gt;
                                 &lt;span id="testDlg1_dlUsers_DOBLabel_0"&gt;Hello&lt;/span&gt;
                              &lt;/td&gt;
                           &lt;/tr&gt;
                         &lt;/table&gt;
                     &lt;/div&gt;
                  &lt;/td&gt;
               &lt;/tr&gt;
            &lt;/table&gt; 
        &lt;/div&gt;
     &lt;/td&gt;
     &lt;td style="height:100%"&gt;
          &lt;div style="position:relative; border:1px solid green; width:15em; height:80%;"&gt;
              &lt;table id="testDlg1_dlGroups" cellspacing="0" style="border-collapse:collapse;"&gt;
                 &lt;tr&gt;
                   &lt;td style="color:#8C4510;background-color:#FFF7E7;"&gt;
                      &lt;div id="testDlg1_dlGroups_droppable1_0" class="droppable1 ui-widget-header" style="border:1px solid black; padding-left:20px;"&gt;
                         &lt;table&gt;
                            &lt;tr&gt;
                               &lt;td&gt;
                                  &lt;span id="testDlg1_dlGroups_DOBLabel_0"&gt;Trash&lt;/span&gt;
                               &lt;/td&gt;
                           &lt;/tr&gt;
                         &lt;/table&gt;
                       &lt;/div&gt;
                   &lt;/td&gt;
               &lt;/tr&gt;
            &lt;/table&gt; 
  </code></pre>