Bug Tracker

Opened 12 years ago

Closed 12 years ago

Last modified 8 years ago

#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>

Change History (1)

comment:1 Changed 12 years ago by flesler

Resolution: duplicate
Status: newclosed

Duplicate

Note: See TracTickets for help on using tickets.