开发者

jQuery sortable (how to customize the clickable area inside the sortable box)

开发者 https://www.devze.com 2022-12-29 05:59 出处:网络
I have this jQuery code: $(\".right_box_holder\").sortable({ update : function () { var order = $(\'.right_box_holder\').sorta开发者_开发知识库ble(\'serialize\');

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!

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号