#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 13 years ago by
comment:2 Changed 13 years ago by
Milestone: | 1.7 → 1.8 |
---|
comment:3 Changed 13 years ago by
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 13 years ago by
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>
You can use this workaround to make an image Draggable and Resizable: