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

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

使用手柄方法

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

这实际上是Draggable的一个功能 - 可排序使用。请参考this example。祝你好运！