title: How do I set custom resize handles with jQuery UI?
body: <p>I'm using jQuery UI to allow my page elements to be resizable, but I'd like to set custom handles.  I've tried what I think should work, but it doesn't.</p>
  
  <p>The basic html is:</p>
  
  <pre><code> &lt;div id="element_x" class="resizable"&gt;
    &lt;div id="overlay_x" class="element_buttons"&gt;
     &lt;div id="resize_element_x" class="resize_element ui-resizable-handle ui-resizable-se"&gt;&lt;img src="images/site/handle_resize.png" border=0 title="Resize this element" /&gt;&lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I set it up like this:</p>
  
  <pre><code>   var reposition = '';
     $(function() {
      $( ".resizable" ).resizable({
       containment: "#viewPage",
       handles: {"e,s,se" : { e: '.ui-resizable-e', s: '.ui-resizable-s', se: '.ui-resizable-se'}},
       resize: function(event, ui){
         reposition = ui.position;
       }
      });
     });
  </code></pre>
  
  <p>This produces the correct handle in the right place, but when I try to resize, it just doesn't do anything! What might be wrong, or is there a better way to do this?</p>