#3446 open bug ()

Opened September 16, 2008 07:41PM UTC

Last modified November 21, 2012 06:03PM UTC

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@cerqa.com
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 (12)

Changed January 02, 2009 02:51PM UTC by scottgonzalez comment:1

milestone: TBD → 1.6
priority: major → critical

Changed January 03, 2009 06:49PM UTC by scottgonzalez comment:2

version: → 1.6rc4

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.

Changed January 16, 2009 06:26PM UTC by scottgonzalez comment:3

milestone: 1.6 → 1.next

Changed February 09, 2009 01:17PM UTC by scottgonzalez comment:4

owner: eduardo
priority: critical → blocker
status: new → assigned

Changed October 19, 2010 03:17PM UTC by scottgonzalez comment:5

milestone: 1.next → 1.9
priority: blocker → major

Changed December 11, 2010 09:02AM UTC by tsyrak comment:6

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

Changed April 18, 2012 06:15PM UTC by scottgonzalez comment:7

#8259 is a duplicate of this ticket.

Changed June 15, 2012 08:28AM UTC by Karan comment:8

Hi guys

Are we going to patch this fix in the forthcoming release of 1.9 ?

Changed June 15, 2012 11:33AM UTC by scottgonzalez comment:9

@Karan No. Do you have a suggested fix?

Changed October 11, 2012 02:49PM UTC by scottgonzalez comment:10

milestone: 1.9.0 → 2.0.0

Changed October 19, 2012 05:57PM UTC by mikesherov comment:11

status: assigned → open

Changed November 21, 2012 06:03PM UTC by Skalkaz comment:12

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