I have this jQuery code:
$(".right_box_holder").sortable({
update : function () {
var order = $('.right_box_holder').sorta开发者_开发知识库ble('serialize');
$.get("right_menu_functions.php?change_sortorder&"+order);
}
});
and this HTML code:
<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>
As it is now, I can click anywhere inside .right_box and move it. I want to disable this and make a button / icon inside .right_box which the user have to click on to drag the box. Is this possible?
DEMO: http://jsbin.com/iwufe4/edit
Use the handle method
$(".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>
This is actually a feature of Draggable - used by sortable.
Have a look at this example. Good luck!
精彩评论