Hi,
Thanks, but I have already tried this way and the issue that I am
facing in this is that the whole dialog in which that div is contained
is not being able to be dragged and the only portion that i making it
draggable is dragged...
Footer div is dialog1.
Please let me know if I am doing something wrong and how can i make
the whole dialog draggable or from footer just like currently it is
from title...
I am putting sample HTML of what I am using it...
!doctype html
html lang=en
head
titlejQuery UI Dialog - Basic modal/title
link type=text/css href=../../themes/base/ui.all.css
rel=stylesheet /
script type=text/javascript src=../../jquery-1.3.2.js/script
script type=text/javascript src=../../ui/ui.core.js/script
script type=text/javascript src=../../ui/ui.draggable.js/
script
script type=text/javascript src=../../ui/ui.dialog.js/script
script type=text/javascript src=../../external/bgiframe/
jquery.bgiframe.js/script
link type=text/css href=../demos.css rel=stylesheet /
style
#draggable, #draggable2 { width: 100px; height: 100px; padding:
0.5em; float: left; margin: 0 10px 10px 0; }
#draggable p { cursor: move; }
/style
script type=text/javascript
$(function() {
$(#dialog).dialog({
bgiframe: true,
modal: true,
height:'auto'
});
$(#dialog1).draggable(handle:'div');
});
/script
/head
body
div class=demo
div id=dialog title=title
p
sdfsdfdsf
sdfdsf
sdfsdfsdf
dsfsdfsd
sdfsdfsd
dsfsdfds
fdsfsdffgdfgfdgdfgdf
dsfsdf
sdfsdffsdf
sdfsdfsdf
dsfsd
dfg
dfgdf
gdf
gdf
gfd
g
dfg
df
gdfnnkkk/p
div id=dialog1 class=ui-widget-content
p class=ui-widget-headerI can be dragged only by this handle/p
/div
/div
!-- Sample page content to illustrate the layering of the dialog --
div class=hiddenInViewSource style=padding:20px;
pSed vel diam id libero a href=http://example.com;rutrum
convallis/a. Donec aliquet leo vel magna. Phasellus rhoncus faucibus
ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis
ultricies neque, sit amet auctor elit eros a lectus./p
form
input value=text input /br /
input type=checkbox /checkboxbr /
input type=radio /radiobr /
select
optionselect/option
/selectbr /br /
textareatextarea/textareabr /
/form
/div!-- End sample page content --
/div!-- End demo --
div class=demo-description
pA modal dialog prevents the user from interacting with the rest of
the page until it is closed. To add a semi-transparent layer that
dims out the page content behind the dialog, set the background color
and opacity of the codeoverlay/code option./p
/div!-- End demo-description --
/body
/html
On Sep 12, 9:12 pm, samma89 samma89frien...@gmail.com wrote:
yeah..there is a way..add a div to footer or anywhere you want to use
as the handle.after that write this in the draggable code handle:
'div's id or class'.thats it.
