title: How to remove an item that is pulled away from it's list?
body: <p>here is a simple question.  I have a 'ul' which i have made sortable via jquery-ui's sortable() function.  I want to remove elements when they are dragged off the list.  The way i have it implemented works in the sense that when i drag an element away from the list it gets removed, but it also gets removed when i just rearrange the list.  How do i achieve the behavior i am looking for without this unintended behavior.  Below is all the code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link type="text/css" href="jquery-ui/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="Stylesheet" /&gt; 
      &lt;script type="text/javascript" src="jquery-ui/js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.17.custom.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
      $(function(){
          $('#sortme').sortable({
              out: function(event, ui){
                  ui.item.remove();
              }
          });
          $('#sortme').disableSelection();
      });
      &lt;/script&gt;
  
      &lt;style&gt;
      li{
          list-style-type: none;
          width: 200px;
          height: 50px;
          border: 1px solid #000;
          text-align: center;
          box-sizing: border-box;
          padding-top: 15px;
      }
      &lt;/style&gt;
      &lt;title&gt; jqui sort test &lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;ul id='sortme'&gt;
          &lt;li&gt;0&lt;/li&gt;
          &lt;li&gt;1&lt;/li&gt;
          &lt;li&gt;2&lt;/li&gt;
          &lt;li&gt;3&lt;/li&gt;
          &lt;li&gt;4&lt;/li&gt;
          &lt;li&gt;5&lt;/li&gt;
          &lt;li&gt;6&lt;/li&gt;
          &lt;li&gt;7&lt;/li&gt;
          &lt;li&gt;8&lt;/li&gt;
          &lt;li&gt;9&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you for your help!</p>