EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: tslatt on October 05, 2011, 08:25:33 AM



Title: How to disable/enable dragging of panels within the portal layout?
Post by: tslatt on October 05, 2011, 08:25:33 AM
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!


Title: Re: How to disable/enable dragging of panels within the portal layout?
Post by: stworthy on October 05, 2011, 06:22:04 PM
To disable the portal panel, try call the below code:

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


Title: Re: How to disable/enable dragging of panels within the portal layout?
Post by: tslatt on October 06, 2011, 11:48:15 AM
That worked! Thank you so much!


Title: Re: How to disable/enable dragging of panels within the portal layout?
Post by: LWardwell on October 24, 2011, 09:27:42 AM
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.


Title: Re: How to disable/enable dragging of panels within the portal layout?
Post by: stworthy on October 24, 2011, 06:13:32 PM
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>