draggable().resizable() works on DIV but not IMG
I've been making myself nuts trying to have an image that is both
draggable and resizable. I am working on a demo that uses group select/
drag (thanks to examples others have posted) and thought it was
something to do with the customized selectable/draggable code.
However, if I strip it down to the very basics, it still doesn't
work.
I was following the simple example shown here:
http://www.learningjquery.com/2008/07/introduction-to-jquery-ui
except applying it to an img and not a div.
I have made the following simple test case to show the issue. Both a
div and an image are set draggable and resizable using the same code.
It works on the div, but not on the image. (image becomes resizable
but not draggable).
Does anyone know why this would be? Is this is a bug, or a
feature? :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script type="text/javascript" src="jquery/jquery-1.2.6.pack.js"></
script>
<script type="text/javascript" src="jquery.ui-1.6rc2/
jquery.ui.all.packed.js"></script>
<style type="text/css">
.bert { height:135px; width:108px; border: 1px solid black }
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".bert").draggable().resizable();
});
</script>
</head>
<body>
<img src="portrait.jpg" class="bert">
<div class="bert">bert</div>
</body>
</html>