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。祝你好運！