CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uijquery-ui-sortable
Daniel Buhai
Daniel Buhai

Reputation: 125

JQuery UI Sortable - restrict drag area of an html sortable element to a specific child element

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 a panel to be draggable only when I drag the panel headers. Is there a way to accomplish this?

Upvotes: 5

Views: 3277

Answers (1)

Karthi Keyan
Karthi Keyan

Reputation: 4393

you can use this option in your sortable interaction

handle:'.header'

Upvotes: 8

Related Questions