Hello!
Unfortunately, there ist still no solution to find in this forum.
How can I prevent a draggable Dialog to be dragged out an specific (html-)element?
In this small example, what is needed to make it work?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This Dialog shall not be able to be dragged outside the white area</title>
<script type="text/javascript" src="lib/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="lib/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript">
Example = new Object();
Example.init = function () {
var dlg = new Ext.BasicDialog('div-dlg', {
title: 'Test Dialog',
height: 200,
width: 300,
minHeight: 100,
minWidth: 150,
modal: false,
proxyDrag: true,
shadow: true
});
dlg.constraintoviewport = true;
dlg.container = Ext.get('div-cont');
dlg.show();
} // end Example.init()
Ext.onReady(Example.init, Example, true);
</script>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<style type="text/css">
#div-cont {
width:600px;
height:400px;
background-color: white;
border: 1px solid #999;
position: absolute;
top:25px;
left:25px;
}
</style>
</head>
<body style="background-color:#eee">
<div id="div-cont"></div>
<div id="div-dlg"></div>
</body>
</html>
Thanks in advance!
Greetz,
stamm