Resizable & Draggable Image

[raziel057]

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.

[raziel057]

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>

[damian82]

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>

[damian82]

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> 

[Scott González]

Duplicate of #3446.