JQuery UI Sortable - limiting the drag and drop area of ​​an html sort element onto a specific child element

Question

This is my simplified div structure, on which I applied the jQuery UI sortable interaction (see this JS Fiddle example ):

<div id="sortable_panels"> <div class="panel" id="panel1"> <div class="header" id="panel1_header">Panel 1 header</div> <div id="panel1_content"></div> </div> <div class="panel" id="panel2"> <div class="header" id="panel2_header">Panel 2 header</div> <div id="panel2_content"></div> </div> <div class="panel" id="panel3"> <div class="header" id="panel3_header">Panel 3 header</div> <div id="panel3_content"></div> </div> <div class="clear"></div> </div>​ 

I want the panel to be dragged only when dragging the panel headers. Is there any way to do this?

Answer 1

you can use this parameter in your sortable interaction

 handle:'.header'