EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: aswzen on May 21, 2015, 07:37:04 PM

Title: How to make panel movable by dragging it header?
Post by: aswzen on May 21, 2015, 07:37:04 PM

How to make panel able to move freely by dragging?

Thanks in advance.

here the fiddle: http://jsfiddle.net/t80bd85z/

Title: Re: How to make panel movable by dragging it header?
Post by: stworthy on May 21, 2015, 07:45:23 PM

Apply the draggable plugin on the outer panel.

Code:

$('#p').panel('panel').draggable({
    handle: '.panel-header'
});

Please refer to http://jsfiddle.net/t80bd85z/1/

Title: Re: How to make panel movable by dragging it header?
Post by: aswzen on May 21, 2015, 07:48:06 PM

thank you :D

Title: Re: How to make panel movable by dragging it header?
Post by: aswzen on May 21, 2015, 07:55:26 PM

oops i found something weird

open this fiddle : http://jsfiddle.net/t80bd85z/2/

try to move Panel 1 , then Panel 2 suddenly move to panel 1? any explanation?

Thank you

Title: Re: How to make panel movable by dragging it header?
Post by: stworthy on May 22, 2015, 05:48:32 PM

You have to set the position style to 'absolute' for all your dragging panels. Please refer to http://jsfiddle.net/t80bd85z/4/