Opened 11 years ago
Last modified 7 years ago
#3446 open bug
draggable does not work with images when resizable is applied
| Reported by: | amclemore | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 2.0.0 |
| Component: | ui.resizable | Version: | 1.6rc4 |
| Keywords: | Cc: | app_dev@… | |
| Blocked by: | Blocking: |
Description
I am trying to make an image resizable and draggable. The image drag functionality does not work correctly when resizing is applied. See HTML example below:
<html > <head >
<title></title>
<script type="text/javascript" language="javascript" src="http://ui.jquery.com/repository/latest/jquery-1.2.6.js"></script>
<script type="text/javascript" language="javascript" src="http://ui.jquery.com/repository/latest/ui/ui.core.js"></script> <script type="text/javascript" language="javascript" src="http://ui.jquery.com/repository/latest/ui/ui.draggable.js"></script> <script type="text/javascript" language="javascript" src="http://ui.jquery.com/repository/latest/ui/ui.resizable.js"></script>
<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict(); $j(document).ready
(
function() {
$j('#imgTest'); $j('#imgTest').resizable({ handles: 'all', knobHandles: true, autoHide: true }).draggable({ cursor: 'move'});
}
);
</script>
</head> <body>
<form >
<div style="position:absolute;height:900;width:800;background-color:Gray">
<img style="position:absolute;top:0;left:0;" alt="" src="http://www.google.com/intl/en_ALL/images/logo.gif" id="imgTest" />
</div>
</form>
</body> </html>
Attachments (1)
Change History (13)
Changed 11 years ago by
| Attachment: | DragAndResizeJquery.htm added |
|---|
comment:1 Changed 11 years ago by
| Milestone: | TBD → 1.6 |
|---|---|
| Priority: | major → critical |
comment:2 Changed 11 years ago by
| Version: | → 1.6rc4 |
|---|
comment:3 Changed 11 years ago by
| Milestone: | 1.6 → 1.next |
|---|
comment:4 Changed 11 years ago by
| Owner: | eduardo deleted |
|---|---|
| Priority: | critical → blocker |
| Status: | new → assigned |
comment:5 Changed 9 years ago by
| Milestone: | 1.next → 1.9 |
|---|---|
| Priority: | blocker → major |
comment:6 Changed 9 years ago by
I am attaching a short example file inspired by the demos. You will see 3 situations:
1- Current one: an image that is both draggable and resizable does not behave as expected. It is not draggable anymore.
2- An option that falls short: putting the image in a draggable and resizable div is not enough, since the image inside of it is not resized. Maybe an option to resize the children of the HTML object also would be welcome.
3- Current fix: resizable image inside of a draggable div. Note we need the div to have its width specified else things might not go as expected once the div is inside of a droppable. It would be interesting to have this fix/bug mentioned in the documentation for resizable or draggable.
Here is the example: http://jsbin.com/ohapi4
comment:8 Changed 7 years ago by
Hi guys Are we going to patch this fix in the forthcoming release of 1.9 ?
comment:10 Changed 7 years ago by
| Milestone: | 1.9.0 → 2.0.0 |
|---|
comment:11 Changed 7 years ago by
| Status: | assigned → open |
|---|
comment:12 Changed 7 years ago by
More simple code, which failed to work properly. Draggable is not needed.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
$(function() {
$(".ui-widget-content").resizable();
});
</script>
</head>
<body>
<img class="ui-widget-content" src='http://precinctproject.us/wp-content/uploads/2011/05/strategy.jpg' />
</body>
</html>
In Chrome (23.0.1271.64 m), the image doesn't appear at first. If I hit enter in the address bar again, the image appears. If I refresh the page (F5) the image doesn't appear.
Workaround: use the img tag with width and height property
When images are made resizable, they are wrapped by a div. If you want an image to be resizable and draggable, you must make the wrapper draggable.
$('img') .resizable() .parent() .draggable();However, this is not ideal because the user should not have to know about resizable's implementation to use draggable (and you must make the image resizable before draggable). Also, with the current implementation, if you were to use the above code and then call .resizable('destroy'), the draggable would be destroyed when the wrapper is removed.