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>
<title>jQuery 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
gdfnnnnnnnnnnksssskk</p>
<div id="dialog1" class="ui-widget-content">
<p class="ui-widget-header">I 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;">
<p>Sed 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" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<p>A 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 <code>overlay</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.
