Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#4241 closed bug (duplicate)

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.

Change History (5)

comment:1 Changed 10 years ago by 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>

comment:2 Changed 10 years ago by rdworth

Milestone: 1.71.8

comment:3 Changed 10 years ago by 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>

comment:4 Changed 10 years ago by 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> 

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

Resolution: duplicate
Status: newclosed

Duplicate of #3446.

Note: See TracTickets for help on using tickets.