jQuery sortable（如何自定义可排序框内的可点击区域）答案

【问题标题】：jQuery sortable (how to customize the clickable area inside the sortable box)jQuery sortable（如何自定义可排序框内的可点击区域）
【发布时间】：2011-02-15 09:35:57
【问题描述】：

我有这个 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 内制作一个按钮/图标，用户必须单击该按钮/图标才能拖动该框。这可能吗？

【问题讨论】：

标签： jquery sorting jquery-ui-sortable

【解决方案1】：

这其实是 Draggable 的一个特性——被 sortable 使用。

看看this example。祝你好运！

【讨论】：

【解决方案2】：

演示：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>

【讨论】：