How do I set custom resize handles with jQuery UI?

Question

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.

The basic html is:

 <div id="element_x" class="resizable">
  <div id="overlay_x" class="element_buttons">
   <div id="resize_element_x" class="resize_element ui-resizable-handle ui-resizable-se"><img src="images/site/handle_resize.png" border=0 title="Resize this element" /></div>
  </div>
 </div>

I set it up like this:

   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;
     }
    });
   });

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?

Answer 1

Your custom handle syntax is wrong. This works for me:

   var reposition = '';
   $(function() {
    $( ".resizable" ).resizable({
     containment: "#viewPage",
     handles: { 'e': '.ui-resizable-e', 's': '.ui-resizable-s', 'se': '.ui-resizable-se'},
     resize: function(event, ui){
       reposition = ui.position;
     }
    });
   });