Drag/Resize Images & Divs
Hi,
I would like to be able to drag & resize images and divs in a page. I've reviewed solutions in the forum & the code that seemed most promising is buggy. Chrome almost works, but moving the divs moves all the items. IE8 seems to nudge the items when I try to move them. Placing the images after the divs gets different undesirable results. Any ideas? Eventually the images & divs will be added dynamically - a wysiwyg type of editor that allows items to be placed anywhere on the page. My code:
- <link type="text/css" href="apis/jqueryui/css/smoothness/jquery-ui-1.8.custom.css" rel="stylesheet" />
- <script type="text/javascript">
-
- $(document).ready(function(){
- $("img").resizable({ handles: "all", ghost: true, autoHide: true }).parent().draggable();
- $("div").resizable({ handles: "all", ghost: true, autoHide: true }).parent().draggable();
- });
-
- </script>
- </head>
- <body>
- <img class="resizebleImage" style="position:absolute" src="images/nordic.gif" width="46" height="46" />
- <img class="resizebleImage" style="position:absolute" src="images/nordic.gif" width="46" height="46" />
- <img class="resizebleImage" style="position:absolute" src="images/nordic.gif" width="46" height="46" />
- <div id="draggable1" style="position:absolute" class="resizebleDiv"><p>Resize & drag me around 1</p></div>
- <div id="draggable2" style="position:absolute" class="resizebleDiv"><p>Resize & drag me around 2</p></div>
- </body>
Thanks, Steve