Response title
This is preview!
Problem with draggable and resizable
Working on it
- Need more info
- Not a problem
- Temporary fix
- Analyzing
- Working on it
- Solved
in Developing jQuery UI
•
13 years ago
Hi,
I'm facing a very strange problem.
I resize a div whose class is 'item', the div is positionned in absolute by the plugin after being resized.
When I scroll the container div, the resized item stay exactly where it were when the resize has stopped.
I think it's a bug.
If someone has a fix for this
You can see a demo here => http://pastebin.me/a5bacc3dc026f86c4941e5900fa22e44
Here is the code used
Thanks
I'm facing a very strange problem.
I resize a div whose class is 'item', the div is positionned in absolute by the plugin after being resized.
When I scroll the container div, the resized item stay exactly where it were when the resize has stopped.
I think it's a bug.
If someone has a fix for this
You can see a demo here => http://pastebin.me/a5bacc3dc026f86c4941e5900fa22e44
Here is the code used
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Conforming XHTML 1.0 Strict Template</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script type="text/javascript">
$(function() {
$('.item').draggable({ revert: true });
$('#target').droppable({ accept: '.item', drop: function() { alert('dropped!'); }});
$('.item').resizable({ maxWidth: 500, minHeight: 150, minWidth: 170, maxHeight: 400,handles: 'n,s' });
});
</script>
<style type="text/css">
#main { width: 900px; height: 500px; }
#main #sidebar { float: left; width: 200px; height: 100%; background-color: #88f; }
#main #sidebar #target { width: 180px; height: 400px; background-color: #f88; margin: 10px; }
#main #container { float: left; width: 600px; height: 500px; overflow: scroll;}
div.item { width: 170px; height: 150px; background-color: #8f8; margin: 10px; }
</style>
</head>
<body>
<div id="main">
<div id="sidebar"><div id="target">Drop target</div></div>
<div id="container">
<table>
<tr><td><div class="item">Drag item 1</div></td></tr>
<tr><td><div class="item">Drag item 1</div></td></tr>
<tr><td><div class="item">Drag item 1</div></td></tr>
<tr><td><div class="item">Drag item 1</div></td></tr>
<tr><td><div class="item">Drag item 1</div></td></tr>
<tr><td><div class="item">Drag item 1</div></td></tr>
</table>
</div>
</div>
</body>
</html>
Thanks
3
