#4241 closed bug (duplicate)

Opened February 26, 2009 09:27PM UTC

Closed June 29, 2009 02:47PM UTC

Last modified January 17, 2010 06:08AM UTC

Resizable & Draggable Image

Reported by: raziel057 Owned by:
Priority: minor Milestone: 1.8
Component: ui.resizable Version: 1.6rc6
Keywords: Cc:
Blocked by: Blocking:
Description

There is a problem if you wants to set an image "Draggable" and "Resizable".

Test case:

<style type="text/css">
#resizable {
width: 160px;
height: 90px;
padding: 0.5em;
border:1px solid #888;
background-color: red;
}
</style>

<script type="text/javascript">
$(function() {
	$("#test").resizable();
	$("#test").draggable();
	
});
</script>

<img id="test" src="../images/user.png" alt="test"/>

In this case, image becomes draggable but not directly resizable. In fact a div is created to cover the image and this div is set resizable:

<div style="..." class="ui-wrapper">
	<img alt="test" src="/images/user.png" id="test" class="..." style="..."/>
	<div class="ui-resizable-handle ..." unselectable="on" style="..."/>
	<div class="ui-resizable-handle ..." unselectable="on" style="..."/>
	<div class="ui-resizable-handle ..." style="..." unselectable="on"/>
</div>

As you can notice, the problem comes from the fact the image can be moved in the resizable div!

Endeed, if the image is just draggable, there is no div which cover it.

Attachments (0)
Change History (5)

Changed February 26, 2009 09:32PM UTC by raziel057 comment:1

You can use this workaround to make an image Draggable and Resizable:

<style type="text/css">
#test {
width: 160px;
height: 90px;
padding: 0;
}
#test img {
width: 100%;
height: 100%;
}
</style>

<script type="text/javascript">
$(function() {
	$("#test").resizable();
	$("#test").draggable();
	
});
</script>

<div id=test >
    <img src="../images/user.png" alt="test"/>
</div>

Changed March 08, 2009 02:31PM UTC by rdworth comment:2

milestone: 1.7 → 1.8

Changed March 19, 2009 02:18PM UTC by damian82 comment:3

Maybe this piece of CSS help you with Resizable & Draggable

<style type="text/css">

#test .ui-resizable-e {

height: 100%;

position: absolute;

right: 0px;

width: 10px;

}

#test .ui-resizable-s {

bottom: 0px;

height: 10px;

position: absolute;

width: 100%;

}

#test .ui-resizable-se {

bottom: 0px;

height: 10px;

position: absolute;

right: 0px;

width: 10px;

}

</style>

Changed March 19, 2009 02:20PM UTC by damian82 comment:4

Formatting fix: Maybe this piece of CSS help you with Resizable & Draggable

<style type="text/css"> 
#test .ui-resizable-e { 
height: 100%; 
position: absolute; 
right: 0px; 
width: 10px; 
} 
#test .ui-resizable-s { 
bottom: 0px; 
height: 10px; 
position: 
absolute; 
width: 100%; 
} 
#test .ui-resizable-se { 
bottom: 0px; 
height: 10px; 
position: absolute; 
right: 0px; 
width: 10px; 
} 
</style>

Changed June 29, 2009 02:47PM UTC by scottgonzalez comment:5

resolution: → duplicate
status: new → closed

Duplicate of #3446.