#3451 closed bug (duplicate)
Resizable + Draggable Issues
| Reported by: | SmboInc | Owned by: | joern |
|---|---|---|---|
| Priority: | major | Milestone: | 1.3 |
| Component: | web | Version: | 1.2.6 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
I'm having some a real issue when a div is both resizable and draggable. Once a div is given these two attributes, things don't work smoothly at all. The main issue is when you try to resize the div layer. The first time you click the resizing handler, the div automatically shrinks to a very small size. I have attached sample code below:
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head><title>
Untitled Page
</title>
<script type="text/javascript" src="Common/Static/JS/jquery-1.2.6.js"> </script>
<script type="text/javascript" src="Common/Static/JS/jquery-ui-personalized-1.5.2.min.js"></script>
</head> <body>
<form name="aspnetForm" method="post" action="TestPage.aspx" id="aspnetForm">
<div> <input type="hidden" name="VIEWSTATE" id="VIEWSTATE" value="/wEPDwUJNTU4NDM2ODMyZGQnmPD8RFfU35pw2jnN8JF3HeamAA==" /> </div>
<div id="domWrapper">
<div id="header">
Header
</div>
<div id="content">
<style type="text/css"> .draggable
{
border: solid 2px black;
}
.handler
{
background-color: Black; font: 12em; color: White; text-align: center; cursor: move;
}
</style>
<script type="text/javascript"> <![CDATA[ $(document).ready(function(){
$(".draggable").draggable( {delay: 100, handle: "#handler", opacity: .40, cursor: "move", containment: "#content"}); $(".draggable").draggable(); $(".draggable").resizable( {autoHide: true, handles: "w,sw,s,e,se", ghost: true, knobHandles: true});
});
]]> </script>
<div id="testControl" class="draggable">
<div id="handler" class="handler">
Handler
</div>
<div id="testControlContent">
Control Content
</div>
</div>
rnoegoreoreoegorogrog goegoer mrgHi this is a test main content
<p>
rkgeg rg ergerger gergereg eg eg ergrg</p>
</div>
<div id="footer">
Footer
</div>
</div> </form>
</body> </html>
Duplicate