How to disable/enable dragging of panels within the portal layout?

[tslatt]

I need to be able to disable and enable dragging/moving of panels within the portal layout. Can anyone tell me how that might be accomplished?

I set up my portal so that when a panel is maximized, (1) all other panels & columns are hidden and (2) the width of the column that the maximized panel is in fills the screen so that the panel fills the screen. However, since dragging is still active, the user can (accidentally) drag the panel into a hidden column, which makes the panel disappear!

Any help would be greatly appreciated!

[stworthy]

To disable the portal panel, try call the below code:

$('#yourpanelid').panel('panel').draggable('disable');

[tslatt]

That worked! Thank you so much!

[LWardwell]

Without starting a new topic... along these same lines, is it possible to trap a panel resize event? So that the div contents of a panel can then be manually resized to the new panel height? Thanks.

[stworthy]

To trap the panel resize event, override the panel's 'onResize' function:
$('#pp').find('div.portal-p').each(function(){
   $(this).panel('options').onResize = function(){
      //...
   }
});

The simple way is to set the content panel to auto fit its parent container, below is some test code:
<div id="pp" style="position:relative">
   ...
   <div style="width:30%;">
      <div title="My Title" closable="true" style="height:280px;">
         <div class="easyui-panel" fit="true">
            content
         </div>
      </div>
   </div>
</div>