JQuery UI Sortable - 将html可排序元素的拖动区域限制为特定子元素

Question

这是我简化的div结构,我在其上应用了JQuery UI可排序交互(请参阅此JS Fiddle示例):

<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>?

我希望只有在拖动面板标题时才能拖动面板.有没有办法实现这个目标？

Answer 1

您可以在可排序的交互中使用此选项

handle:'.header'