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的一个功能 - 由sortable使用。

看看this example。祝你好运！

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

2 个答案: