Странный баг UI draggable в Firefox и IE
Всем доброго времени суток!
Столкнулся со странным багом в Firefox 3 и Internet Explorer 7 при использовании плагина draggable.
Есть DIV, который представляет собой диалоговое окно. В нем есть DIV, который является заголовком диалога. Диалог может быть передвинут только с помощью заголовка.
При всем при этом диалог не должен выходить из рамок страницы (тега BODY).
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var dialog_id = '#sys-dialog';
$(dialog_id).draggable({
handle:dialog_id + '-title',
containment:'parent',
scroll:false
});
});
</script>
<style type="text/css">
#sys-dialog{
border:1px solid black;
width:300px;
height:200px;
position:absolute;
z-index:1000;
background-color:white;
font-family:arial;
overflow:hidden;
font-size:13px;
}
#sys-dialog-title{
cursor:move;
background:black;
color:white;
font-weight:bold;
margin:1px;
padding:1px 0px;
text-align:center;
}
</style>
</head>
<body>
<div id="sys-dialog">
<div id="sys-dialog-title">title</div>
dialog
</div>
</body>
</html>
Рабочий пример
При попытке перетащить куда-нибудь диалог (в FF3 и IE7), он "выскакивает" за пределы верхней границы документа. Это происходит только при использовании атрибута "containment" при инициализации плагина draggable.
Кто-нибудь имеет представление о том как решить данную проблему?
Заранее спасибо за посильную помощь. |