Opened 10 years ago

Last modified 6 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)

DragAndResizeJquery.htm (1.2 KB) - added by amclemore 10 years ago.

Download all attachments as: .zip

Change History (13)

Changed 10 years ago by amclemore

Attachment: DragAndResizeJquery.htm added

comment:1 Changed 10 years ago by Scott González

Milestone: TBD1.6
Priority: majorcritical

comment:2 Changed 10 years ago by Scott González

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.

comment:3 Changed 10 years ago by Scott González

Milestone: 1.61.next

comment:4 Changed 10 years ago by Scott González

Owner: eduardo deleted
Priority: criticalblocker
Status: newassigned

comment:5 Changed 8 years ago by Scott González

Milestone: 1.next1.9
Priority: blockermajor

comment:6 Changed 8 years ago by tsyrak

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:7 Changed 7 years ago by Scott González

#8259 is a duplicate of this ticket.

comment:8 Changed 7 years ago by Karan

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

comment:9 Changed 7 years ago by Scott González

@Karan No. Do you have a suggested fix?

comment:10 Changed 6 years ago by Scott González

Milestone: 1.9.02.0.0

comment:11 Changed 6 years ago by mikesherov

Status: assignedopen

comment:12 Changed 6 years ago by Skalkaz

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

Note: See TracTickets for help on using tickets.