I have created an accordion and i want to make accordion header and its content body draggable at the same time.

now the problem is if is attach draggable/sortable to accordion directly then h3 (header of accordion) and div (content body of accordion) elements are draggred separately but i want to drag the h3 and div both at the same time. to achieve it i tried to put h3 and div both in a separate div block but then accordion would not perform normally so how to club h3 and div to drag them as a whole block ?

Javascript

$("#accordion").accordion();
$
("#accordion").sortable();

HTML is as follows

<div id="accordion">
    
<h3>
       
<div> Option One </div>
    
</h3>
    
<div>
       
<p>Content 1</p>
    
</div>
    
<h3>
       
<div> Option Two </div>
    
</h3>
    
<div>
       
<p>Content 2</p>
    
</div>
</div>