JQuery sortable (how to set up an interactive access zone inside a sort field)

Question

I have this jQuery code:

$(".right_box_holder").sortable({ 
        update : function () { 
            var order = $('.right_box_holder').sortable('serialize'); 
            $.get("right_menu_functions.php?change_sortorder&"+order);
        }   
    });

and this HTML code:

<div class='right_box_holder'>
  <div class='right_box' id='box_0'>
    // sort box 0
  </div>
  <div class='right_box' id='box_1'>
    // sort box 1
  </div>
  <div class='right_box' id='box_2'>
    // sort box 2
  </div>
</div>

As of now, I can click anywhere inside .right_box and move it. I want to disable this and make the button / icon inside .right_box, which the user must click to drag the window. Is it possible?

Answer 1

DEMO: http://jsbin.com/iwufe4/edit

Use processing method

$(".right_box_holder").sortable({ 
        handle: '.button_icon_or_css_sprite', // use the handle method
        update : function () { 
            var order = $('.right_box_holder').sortable('serialize'); 
            $.get("right_menu_functions.php?change_sortorder&"+order);
        }   
    });

<div class='right_box_holder'>
  <div class='right_box' id='box_0'>
    <img class="button_icon_or_css_sprite" />
  </div>
  <div class='right_box' id='box_1'>
    <img class="button_icon_or_css_sprite" />
  </div>
  <div class='right_box' id='box_2'>
   <img class="button_icon_or_css_sprite" />
  </div>
</div>

Answer 2

This is actually a Draggable function - used by sorting.

Check out this example . Good luck