IE7 not dragging if position:absolute. drags only once otherwise.
I've been eagerly testing some of the new UI and I've run across a
problem with draggables in IE (7). Using the following HTML page, in
IE I cannot drag at all if the element is absolutely positioned. If it
is relatively positioned or not positioned at all, I can drag only one
time. Trying to drag the same element fails after the first time.
Needless to say, Firefox and Opera work great.
(WinXP w/IE7)
<!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>
<script type="text/javascript" src="jquery-1.1.4.js"></script>
<script type="text/javascript" src="dimensions.js"></script>
<script type="text/javascript" src="ui.mouse.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.draggable.ext.js"></script>
<style type="text/css">
.container{
border:1px solid blue;
position:absolute;
z-Index:100;
width:300px;
height:60px;
}
#textInput1_container{
top:25px;
left:500px;
}
</style>
</head>
<body>
<div id="textInput1_container" class="container">
Enter text: <input type="text" id="textInput1" name="textInput1"
size="40" />
</div>
<script type="text/javascript">
$(function(){
$('.container').draggable();
});
</script>
</body>
</html>