Bug Tracker

#3451 closed bug (duplicate)

Opened October 06, 2008 03:56AM UTC

Closed October 07, 2008 01:55PM UTC

Last modified March 14, 2012 11:41PM UTC

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>

Attachments (0)
Change History (1)

Changed October 07, 2008 01:55PM UTC by flesler comment:1

resolution: → duplicate
status: new → closed

Duplicate