jQuery可排序(如何自定义可排序框内的可点击区域)

Question

我有这个jQuery代码:

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

这个HTML代码:

<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>

就像现在一样,我可以点击.right_box内的任何地方并移动它.我想禁用它并在.right_box中创建一个按钮/图标,用户必须单击该按钮/图标才能拖动该框.这可能吗？

Answer 1

演示:http://jsbin.com/iwufe4/edit

使用handle方法

$(".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>